react-chartjs-2#Bar TypeScript Examples

CompareChart = ({ queries }: CompareChartProps) => (
  <ChartContainer>
    <Bar
      data={getChartData(queries)}
      options={{

        title: {
          display: true,
          text: 'QUERY GROUP VS RUNTIME (ms)',
          fontSize: 16,
        },
        legend: {
          display: true,
          position: 'right',
        },
        scales: {
          yAxes: [{
            ticks: {
            beginAtZero: true
          }
          }],
        },
        maintainAspectRatio: false,

      }}
    />
  </ChartContainer>
)

function Chart({ title, data, config, xAxisLabel }: ChartProps) {
  try {
    const chartData = formatChartData(data, config);

    switch (config.type) {
      case 'bar':
        return (
          <div>
            <Bar
              data={chartData}
              options={getChartConfig(
                config.stacked || false,
                title,
                xAxisLabel,
              )}
            />
          </div>
        );
      case 'line':
        return (
          <div>
            <Line
              data={chartData}
              options={getChartConfig(
                config.stacked || false,
                title,
                xAxisLabel,
              )}
            />
          </div>
        );
      default:
        throw new Error(
          `Charts of type ${config.type} have not been implemented yet.`,
        );
    }
  } catch (err) {
    console.error(
      err,
      'An error occured. This chart structure may not be supported yet.',
    );
  }
  return null;
}

DataDocChart = React.memo<IDataDocChartProps>(
    ({ meta, data = [], chartJSOptions = {}, chartJSRef }) => {
        const theme = useSelector(
            (state: IStoreState) => state.user.computedSettings.theme
        );

        React.useEffect(() => {
            Chart.defaults.color = `rgb(
            ${fontColor[theme][0]},
            ${fontColor[theme][1]},
            ${fontColor[theme][2]}
        )`;
            Chart.defaults.font = {
                family: 'Avenir Next',
                size: 14,
                style: 'normal',
                weight: undefined,
                lineHeight: 1.2,
            };
            Chart.defaults.plugins.filler.propagate = true;
        }, [theme]);

        const [xAxesScaleType, yAxesScaleType] = useChartScale(meta, data);
        const chartData = processChartJSData(
            data,
            meta,
            theme,
            xAxesScaleType,
            yAxesScaleType
        );
        const combinedChartJSOptions = useMemo(
            () => ({
                ...mapMetaToChartOptions(
                    meta,
                    theme,
                    xAxesScaleType,
                    yAxesScaleType
                ),
                ...chartJSOptions,
            }),
            [meta, theme, xAxesScaleType, yAxesScaleType, chartJSOptions]
        );

        const chartProps = {
            data: chartData,
            plugins: [ChartDataLabels],
            options: combinedChartJSOptions,
            ref: chartJSRef,
        };
        let chartDOM = null;
        if (meta.chart.type === 'line' || meta.chart.type === 'area') {
            chartDOM = <Line {...chartProps} />;
        } else if (
            meta.chart.type === 'bar' ||
            meta.chart.type === 'histogram'
        ) {
            chartDOM = <Bar {...chartProps} />;
        } else if (meta.chart.type === 'pie') {
            chartDOM = <Pie {...chartProps} />;
        } else if (meta.chart.type === 'doughnut') {
            chartDOM = <Doughnut {...chartProps} />;
        } else if (meta.chart.type === 'scatter') {
            chartDOM = <Scatter {...chartProps} />;
        } else if (meta.chart.type === 'bubble') {
            chartDOM = <Bubble {...chartProps} />;
        }

        return (
            <DataDocChartWrapper size={meta.visual.size}>
                {chartDOM}
            </DataDocChartWrapper>
        );
    }
)

export default function Chart(field: ChartProps) {
  const count = counter(field.entries!.map(entry => entry.rating));

  const labels = [];
  const data = [];

  const palette = [
    presetPalettes.red,
    presetPalettes.volcano,
    presetPalettes.orange,
    presetPalettes.gold,
    presetPalettes.yellow,
    presetPalettes.lime,
    presetPalettes.green,
    presetPalettes.cyan,
    presetPalettes.blue,
    presetPalettes.geekblue,
  ].map(palette => palette[5]);

  const colors = [];

  for (let i = 1; i <= field.count!; i++) {
    labels.push(i);
    data.push(count[i] || 0);

    const paletteIdx = Math.round(
      ((i - 1) / (field.count! - 1)) * (palette.length - 1)
    );
    colors.push(palette[paletteIdx]);
  }

  const chartData = {
    datasets: [
      {
        data,
        label: 'Responses',
        backgroundColor: colors,
      },
    ],
    labels,
  };

  const chartOptions = {
    legend: {
      display: false,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            stepSize: 1,
          },
        },
      ],
    },
  };

  return <Bar data={chartData} options={chartOptions} />;
}

export default function Dashboard() {
  const [isPaid, setIsPaid] = useState(false);
  const { user } = useAuthState();
  const [member, setMember] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [previousEvents, setPreviousEvents] = useState([]);
  const [upcomingEvents, setUpComingEvents] = useState([]);

  useEffect(() => {

    document.title = "The Chess Centre | Dashboard";

    async function fetchMember() {
      setIsLoading(true);
      const {
        data: { getMember: member },
      } = await API.graphql({
        query: getMember,
        variables: { id: user.attributes.sub },
      });
      const membershipStatus = await isPaidMember();
      setIsPaid(membershipStatus);
      setMember(member);
      if (member?.entries?.items) {
        setEventData(member.entries.items);
      }
      setIsLoading(false);
    }
    fetchMember();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  const setEventData = (data) => {
    const past = data.filter(
      ({ event }) => new Date(event.startDate) < new Date()
    );
    const upcoming = data.filter(
      ({ event }) => new Date(event.startDate) >= new Date()
    );
    setPreviousEvents(past);
    setUpComingEvents(upcoming);
  };

  return (
    <>
      <h1 className="relative my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
        <i className="fad fa-chart-network text-teal-600"></i> Dashboard
        {isPaid && !isLoading && (
          <div className="inline-flex align-top top-2 ml-2">
            <span className="items-center px-2.5 py-0.5 rounded-md text-xs sm:text-sm font-medium bg-yellow-100 text-yellow-800 top-2">
              Premium
            </span>
          </div>
        )}
        {isLoading && (
          <div className="absolute text-teal-500 mt-2 align-middle ml-2 text-sm inline-flex">
            <i className="fal fa-spinner-third fa-spin fa-fw"></i>
          </div>
        )}
      </h1>

      <div className="pb-5 border-b border-gray-200 dark:border-gray-700">
        <div className="-ml-2 -mt-2 flex flex-wrap items-baseline">
          <p className="ml-2 mt-1 text-sm text-left text-gray-500 dark:text-gray-400">
            Insights from your previous games and results.
          </p>
        </div>
      </div>

      <Stats
        ratingData={member?.ratingInfo ? JSON.parse(member.ratingInfo) : []}
        eventData={{
          past: previousEvents.length || 0,
          future: upcomingEvents.length || 0,
        }}
        gameData={member?.gameInfo ? JSON.parse(member.gameInfo) : {}}
      />
      <div className="grid gap-2 xl:gap-4 mb-8 md:grid-cols-3 mt-6">
        <ChartCard title="Results">
          <Doughnut {...ResultsDoughnut(member?.gameInfo)} />
        </ChartCard>
        <ChartCard title="Games">
          <Bar {...GamesChart(member?.gameInfo)} />
        </ChartCard>
        <ChartCard title="Rating">
          <Line {...RatingProgressChart(member?.ratingInfo)} />
        </ChartCard>
      </div>
      <EventTable
        upcomingEvents={upcomingEvents}
        previousEvents={previousEvents}
      />
    </>
  );
}

MemoizedBar = React.memo(function BarImpl(props: {
  sortedSales: number[];
  mint: MintInfo;
}) {
  const histogrammedData: Record<number, number> = {
    0: 0,
    5: 0,
    20: 0,
    50: 0,
    100: 0,
    500: 0,
    1000: 0,
    10000: 0,
  };
  const asArray = [0, 5, 20, 50, 100, 500, 1000, 10000];

  for (let i = 0; i < asArray.length; i++) {
    const currRange = asArray[i];

    if (i < asArray.length - 1) {
      const nextRange = asArray[i + 1];
      histogrammedData[currRange] = props.sortedSales.filter(
        s =>
          fromLamports(s, props.mint) >= currRange &&
          fromLamports(s, props.mint) < nextRange,
      ).length;
    } else {
      histogrammedData[currRange] = props.sortedSales.filter(
        s => fromLamports(s, props.mint) >= currRange,
      ).length;
    }
  }

  const histoData = {
    labels: [
      '◎ [0 - 5)',
      '◎ [5 - 20)',
      '◎ [20 - 50)',
      '◎ [50 - 100)',
      '◎ [100 - 500)',
      '◎ [500 - 1000)',
      '◎ [1000 - 10000)',
      '◎ [10000 -',
    ],
    datasets: [
      {
        label: '# bids in these bins',
        data: asArray.map(a => histogrammedData[a]),
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 139, 24, 0.2)',
          'rgba(212, 39, 24, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 139, 24, 1)',
          'rgba(212, 39, 24, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  const histoOptions = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
  };
  // @ts-ignore
  return <Bar data={histoData} options={histoOptions} />;
})

export default function Chart(props: ChartProps) {
  const count = counter(
    props.entries!.map(entry => {
      const score = entry.netPromoterScore!;
      if (0 <= score && score <= 6) {
        return Customer.Detractor;
      }
      if (score <= 8) {
        return Customer.Passive;
      }
      if (score <= 10) {
        return Customer.Promoter;
      }
      return null;
    })
  );

  const detractorCount = count[Customer.Detractor] || 0;
  const passiveCount = count[Customer.Passive] || 0;
  const promoterCount = count[Customer.Promoter] || 0;
  const totalCount = promoterCount + passiveCount + detractorCount;

  const nps = ((promoterCount - detractorCount) * 100) / totalCount || 0;
  const npsColors = [
    presetPalettes.red,
    presetPalettes.volcano,
    presetPalettes.orange,
    presetPalettes.gold,
    presetPalettes.yellow,
    presetPalettes.lime,
    presetPalettes.green,
  ].map(palette => [palette[0], palette[5]]);

  const detractorColor = presetPalettes.red[5];
  const passiveColor = presetPalettes.yellow[5];
  const promoterColor = presetPalettes.green[5];

  const npsColorIdx = Math.round(((nps + 100) * (npsColors.length - 1)) / 200);
  const [npsColorLight, npsColorDark] = npsColors[npsColorIdx];

  const labels = [Customer.Detractor, Customer.Passive, Customer.Promoter];
  const data = [detractorCount, passiveCount, promoterCount];

  const chartData = {
    datasets: [
      {
        data,
        label: 'Responses',
        backgroundColor: [detractorColor, passiveColor, promoterColor],
      },
    ],
    labels,
  };

  const chartOptions = {
    legend: {
      display: false,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            stepSize: 1,
          },
        },
      ],
    },
  };

  return (
    <>
      <Typography.Text style={{paddingRight: 5}}>
        Net Promoter Score:
      </Typography.Text>
      <Tag
        color={npsColorLight}
        style={{
          color: npsColorDark,
          borderColor: npsColorDark,
        }}
      >
        {nps.toFixed(2)}%
      </Tag>
      <Bar data={chartData} options={chartOptions} />
    </>
  );
}