This is a react dashboard library

Usage

import DashboardComponent from "spectramicro-dashboard"

const config = [
  {
    title: "",
    width: 500,
    height: 400,
    widgetName: "",
    widgetConfig: {
      appId: "HARMONIZE",
      chartType: "ComboChart",
      resultsetId: "provider_rate_by_os_name_data",
      filters: "",
      limit: null,
      nlpFilters: "",
      dimensions: "provider",
      measures: [{ measureField: "total", measureType: "avg" }],
      xAxis: "provider",
      yAxis: "total",
      optionType: "donut",
      onlyLabel: false,
      activeShape: "1",
      activeShapeCenter: "value",
      activeShapeHoverOnly: true,
      chartRadius: {
        cx: 200,
        cy: 200,
        innerRadius: 40,
        outerRadius: 80,
      },
      tooltipProps: {},
      legendProps: {},
      customLegend: true,
      customLegendOption: "1",
      // customLegendValue: "value",
      showToolTip: false,
      widgetColorConfig: {
        key: "provider",
        colors: [
          {
            value: "OPCX",
            color: "#6bde37",
          },
          {
            value: "AWS",
            color: "#ea7064",
          },
        ],
      },
      widgetType: "PieChart"
    },
  },
];

const onSelect = (widgetName, index, data) => {
  console.log("widgetName", widgetName);
  console.log("index", index);
  console.log("data", data);
};

<DashboardComponent config={config} onSelect={onSelect} />