react-chartjs-2#Doughnut TypeScript Examples

function ChartDoughnut ({ className = '', size = 100, values }: DoughnutProps): React.ReactElement<DoughnutProps> {
  const options: Options = {
    colorHover: [],
    colorNormal: [],
    data: [],
    labels: []
  };

  values.forEach(({ colors: [normalColor = '#00f', hoverColor], label, value }): void => {
    options.colorNormal.push(normalColor);
    options.colorHover.push(hoverColor || normalColor);
    options.data.push(bnToBn(value).toNumber());
    options.labels.push(label);
  });

  return (
    <Base className={className}>
      <Doughnut
        data={{
          datasets: [{
            backgroundColor: options.colorNormal,
            data: options.data,
            hoverBackgroundColor: options.colorHover
          }],
          labels: options.labels
        }}
        height={size}
        width={size}
      />
    </Base>
  );
}

export default function Chart(props: ChartProps) {
  const count = counter(
    props.entries!.map((entry: any) => entry.singleChoice?.title)
  );

  const colors = Object.values(presetPalettes)
    .flatMap(palette => palette.slice(5))
    .sort(() => Math.random() - 0.5);

  const chartData = {
    datasets: [
      {
        data: Object.values(count),
        backgroundColor: colors,
      },
    ],
    labels: Object.keys(count),
  };

  return <Doughnut data={chartData} />;
}

// eslint-disable-next-line no-magic-numbers
function ChartDoughnut({ className = '', size = 100, values }: DoughnutProps): React.ReactElement<DoughnutProps> {
  const options: Options = {
    colorHover: [],
    colorNormal: [],
    data: [],
    labels: [],
  };

  values.forEach(({ colors: [normalColor = '#00f', hoverColor], label, value }): void => {
    options.colorNormal.push(normalColor);
    options.colorHover.push(hoverColor || normalColor);
    options.data.push(bnToBn(value).toNumber());
    options.labels.push(label);
  });

  return (
    <Base className={className}>
      <Doughnut
        type=""
        data={{
          datasets: [
            {
              backgroundColor: options.colorNormal,
              data: options.data,
              hoverBackgroundColor: options.colorHover,
            },
          ],
          labels: options.labels,
        }}
        height={size}
        width={size}
      />
    </Base>
  );
}

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>
        );
    }
)

PieChart = ({
  title,
  pieDataSet,
  className,
  ...props
}: PieChartProps) => {
  const titleId = useUuid()
  const { colors } = useTheme()

  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      animation: {
        duration: 400,
        easing: 'easeOutCubic',
      },
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          fontColor: colors.onSurface,
          boxWidth: 12,
        },
      },
      tooltips: {
        displayColors: false,
        callbacks: {
          label: (
            tooltipItem: Record<string, number>,
            data: Record<string, Record<string, string>[]>,
          ) => {
            const { index } = tooltipItem
            return `${data.labels[index]}: ${data.datasets[0].data[index]}%`
          },
        },
      },
    }),
    [colors],
  )

  const chartData = useMemo(
    () => ({
      labels: Object.keys(pieDataSet).map(capitalizeFirstLetter),
      datasets: [
        {
          label: title,
          data: Object.keys(pieDataSet).map((item) => pieDataSet[item]),
          fill: false,
          backgroundColor: chartColors,
          borderColor: chartColors,
          borderWidth: 0,
        },
      ],
    }),
    [title, pieDataSet],
  )

  return (
    <section
      className={clsx('card p-5 transition-colors', className)}
      {...props}
    >
      <h4
        id={titleId}
        className="text-onSurface mb-2 text-center text-base font-light"
      >
        {title}
      </h4>
      <div aria-describedby={titleId} className="w-full">
        <Doughnut data={chartData} options={options} />
      </div>
    </section>
  )
}

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}
      />
    </>
  );
}