import { HvTypography } from "@hitachivantara/uikit-react-core";
import { Ticket } from "@hitachivantara/uikit-react-icons";
import { HvDonutChart } from "@hitachivantara/uikit-react-viz";

export default function Demo() {
  const data = {
    Country: ["Portugal", "Spain", "France", "Germany"],
    "Tickets Sold": [61829, 123948, 253792, 524638],
  };

  return (
    <div
      style={{
        position: "relative",
        height: "100%",
        width: "100%",
      }}
    >
      <HvDonutChart
        height={300}
        data={data}
        groupBy="Country"
        measure="Tickets Sold"
        legend={{
          position: {
            y: "bottom",
            x: "center",
          },
        }}
      />
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <Ticket size="M" />
        <HvTypography variant="title3">
          {data["Tickets Sold"].reduce((acc, value) => acc + value, 0)}
        </HvTypography>
      </div>
    </div>
  );
}

import { useMemo } from "react";
import { GaugeChart } from "echarts/charts";
import * as echarts from "echarts/core";
import { useTheme } from "@hitachivantara/uikit-react-core";
import { HvBaseChart } from "@hitachivantara/uikit-react-viz";

echarts.use([GaugeChart]);

export default function Demo() {
  const { activeTheme, selectedMode } = useTheme();
  const colors = activeTheme!.colors.modes[selectedMode];

  const optionGauge = useMemo(
    () => ({
      series: [
        {
          type: "gauge",
          startAngle: 225,
          endAngle: -45,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            width: 20,
            itemStyle: {
              color: colors.negative,
            },
          },
          axisLine: {
            lineStyle: {
              width: 20,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          detail: {
            valueAnimation: true,
            formatter: (value: number) =>
              ["{l|High Risk}", "{v|" + value + "%}"].join("\n"),
            rich: {
              v: {
                fontSize: 48,
                color: colors.text,
              },
              l: {
                fontSize: 16,
                color: colors.text,
              },
            },
          },
          data: [
            {
              value: 80,
            },
          ],
        },
        {
          type: "gauge",
          startAngle: 225,
          endAngle: -45,
          pointer: {
            show: true,
            icon: "rect",
            length: "25%",
            offsetCenter: [0, "-80%"],
            width: 1,
            itemStyle: {
              color: "#000",
            },
          },
          axisLine: {
            show: false,
          },
          progress: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          data: [
            {
              value: 65,
            },
          ],
          detail: {
            show: true,
            offsetCenter: ["75%", "-90%"],
            formatter: (value: number) => `${value}%`,
            fontSize: 14,
            color: "#000",
          },
          z: 10,
        },
      ],
    }),
    [colors],
  );

  return (
    <div
      style={{
        height: "100%",
        width: "100%",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <HvBaseChart width={400} height={300} option={optionGauge} />
    </div>
  );
}

import { useEffect, useRef, useState } from "react";
import { HvLineChart } from "@hitachivantara/uikit-react-viz";

export default function Demo() {
  const rand = (diff: number) => Math.random() * diff - diff / 2;

  const generateDates = (initialDate: Date, num = 200) =>
    Array.from(Array(num).keys()).map((i) =>
      new Date(new Date(initialDate).setDate(initialDate.getDate() + i))
        .toISOString()
        .slice(0, 10),
    );

  const generateValues = (num = 10, start = 200, inc = 8) => {
    const values = [start];
    for (let i = 0; i <= num; i += 1) {
      values.push(values[i] + rand(inc));
    }
    return values;
  };

  const date = useRef(new Date(2020, 1, 1));
  const values = useRef(generateValues(200));

  const generateData = () => {
    return {
      Date: generateDates(date.current),
      "Sales Target": values.current,
    };
  };

  const [data, setData] = useState(generateData());

  const addDaysToCurrentDate = (num: number) => {
    const currentDay = new Date(date.current);
    date.current = new Date(currentDay.setDate(currentDay.getDate() + num));
  };

  useEffect(() => {
    const interval = setTimeout(() => {
      addDaysToCurrentDate(1);

      const intervalValues = values.current.slice();
      intervalValues.splice(0, 1);
      values.current = intervalValues.concat(
        generateValues(1, intervalValues[intervalValues.length]),
      );

      setData(generateData());
    }, 1000);

    return () => clearTimeout(interval);
  });

  return (
    <HvLineChart
      height={400}
      data={data}
      groupBy="Date"
      measures={{ field: "Sales Target", hideSymbol: true }}
    />
  );
}