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