Questions on static mode

How to input multiple metric and dimension data in static mode.

You can currently achieve this by using chartConfigProps, this prop will enable you to provide multiple datasets to the chart, here is an example using a TimeSeries line chart

<TimeSeries
  // provide `labels` and `values` as normal for the first dataset
  labels={[
    "2024-01-11T00:00:00Z",
    "2024-01-12T00:00:00Z",
    "2024-01-13T00:00:00Z",
    "2024-01-14T00:00:00Z",
    "2024-01-15T00:00:00Z",
    "2024-01-16T00:00:00Z",
    "2024-01-17T00:00:00Z",
    "2024-01-18T00:00:00Z",
  ]}
  values={["586", "515", "580", "730", "767", "100", "717", "805"]}
  variant="line"
  chartConfigProps={(config) => ({
    ...config,
    data: {
      ...config.data,
      datasets: [
        {
          ...config.data.datasets[0],
          tension: 0.1,
          borderColor: "#17B897",
          borderWidth: 2,
          pointStyle: false,
        }, 
        { // you can configure further datasets here, `data` would match the `values`
          ...config.data.datasets[1],
          data: [279, 257, 290, 365, 384, 450, 358, 402],
          labels: [
            "2024-01-11T00:00:00Z",
            "2024-01-12T00:00:00Z",
            "2024-01-13T00:00:00Z",
            "2024-01-14T00:00:00Z",
            "2024-01-15T00:00:00Z",
            "2024-01-16T00:00:00Z",
            "2024-01-17T00:00:00Z",
            "2024-01-18T00:00:00Z",
          ],
          tension: 0.1,
          borderColor: "#FF0000",
          borderWidth: 2,
          pointStyle: false,
        },
      ],
    },
  })}
/>

How to change chart type dynamically like line/bar etc

You can change chart types dynamically using state, you can try this by using our sample apps

https://github.com/propeldata/ui-kit/assets/84721399/79e2d2e4-b937-4b9e-bcf1-231e5649fd3a

Does static mode supports comparison data chart X axis: metric 1, metric 2, metric 3 Y axis: dimension 1, dimension 2, dimension

Currently you can make this using the Leaderboard component, similar to the TimeSeries, pass in the first dataset using rows and then you can use chartConfigProps to add further datasets

<Leaderboard
  headers={['header1', 'header2', 'header3']}
  rows={[
    ['row1', '100'],
    ['row3', '200'],
    ['row5', '300'],
  ]}
  variant="bar"
  chartConfigProps={(config) => ({
    ...config,
    data: {
      ...config.data,
      datasets: [
        {
          ...config.data.datasets[0],
          backgroundColor: '#17B897',
          borderColor: '#17B897',
          hoverBackgroundColor: '#17B897',
          hoverBorderColor: '#17B897',
        },
        {
          ...config.data.datasets[0],
          data: [150, 250, 350], // each value corresponds to the row
          backgroundColor: '#FF0000',
          hoverBackgroundColor: '#FF0000',
          hoverBorderColor: '#FF0000',
          barThickness: 15
        }
      ],
    },
    options: {
      ...config.options,
      indexAxis: 'x'
    }
  })}
/>

Kindly provide a guide or sample app related to propel static mode if possible.

You can use our sample apps in order to test static/connected mode components

propeldata / ui-kit

Questions on static mode #195