Hi, I am new to Monday apps and have been going through the components on https://style.monday.com/ and trying to familiarize myself with some of them.
I attempted to use the LinearProgressBar and had some difficulty getting it to work. I will add my code and what the output looks like below.
import logo from './logo.svg';
import './App.css';
//Import monday sdk and UI module
import mondaySdk from "monday-sdk-js";
import "monday-ui-react-core/dist/main.css"
import "monday-ui-react-core/dist/main.js"
//Import UI elements from monday
import LinearProgressBar from "monday-ui-react-core/dist/LinearProgressBar.js"
import Loader from "monday-ui-react-core/dist/Loader.js"
//Import Charts from vis
import '../node_modules/react-vis/dist/style.css';
import {XYPlot, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis} from 'react-vis';
//Create monday sdk instance
const monday = mondaySdk();
/* const color = monday.color;
const colors = monday.colors; */
function App() {
const firstValue = Number("First value", 10);
//const firstColor = color("First bar Color", "#597BFC");
const secondValue = Number("Second value", 20);
//const secondColor = color("Second bar Color", colors.blackish);
const thirdValue = Number("Third value", 30);
//const thirdColor = color("Third bar Color", colors.grass_green);
const multiValues = [
{ value: firstValue, color: "#597BFC" },
{ value: secondValue, color: "#225091" },
{ value: thirdValue, color: "#FF7575" }
];
const data = [
{x: 0, y: 8},
{x: 1, y: 5},
{x: 2, y: 4},
{x: 3, y: 9},
{x: 4, y: 1},
{x: 5, y: 7},
{x: 6, y: 6},
{x: 7, y: 3},
{x: 8, y: 2},
{x: 9, y: 0}
];
return (
<div className="App">
<div style={{ width: "50%", margin: "40px" }}>
<LinearProgressBar
animated
max={Number("Max value", 100)}
min={Number("Min value", 0)}
size={LinearProgressBar.sizes.LARGE}
indicateProgress
multi
multiValues={multiValues}
ariaLabel="A few colors"
/>
<div style={{ width: "50%", margin: "40px" }}>
<LinearProgressBar
value={Number("Value", 50)}
animated={Boolean("Is animated", true)}
valueSecondary={Number("Secondary bar value", 60)}
max={Number("Max value", 100)}
min={Number("Min value", 0)}
size={LinearProgressBar.sizes.LARGE}
//barStyle={select("Style", Object.values(LinearProgressBar.styles), LinearProgressBar.styles.PRIMARY)}
indicateProgress={Boolean("Indicate Progress", true)}
//className={select("With custom class", ["linear-progress-bar--custom-class", ""], "")}
ariaLabel="my awesome growth bar"
/>
</div>
<div style={{ width: "20%", margin: "100px", display:"none" }}>
<Loader svgClassName="loader-size-sm" />
</div>
<XYPlot height={300} width= {300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
</div>
</div>
);
}
export default App;
The graph is not relevant, it is just something else I was playing with. Does anyone know what I might be doing wrong? I am new to using React/node so I may be making a beginner mistake here but I couldn’t figure out what that might be.