import classNames from "classnames" ; import { createElement , ReactElement } from "react" ; import { ChartWidget , ChartWidgetProps } from "@mendix/shared-charts" ; import { PieChartContainerProps } from "../typings/PieChartProps" ; import { usePieChartDataSeries } from "./hooks/data" ; const pieChartLayoutOptions = { font : { color : "#FFF" , size : 12 } , legend : { font : { family : "Open Sans" , size : 14 , color : "#555" } } } ; const pieChartConfigOptions = { responsive : true } ; const pieChartSeriesOptions = { type : "pie" , hoverinfo : "none" , sort : false } ; export function PieChart ( props ) { const pieChartData = usePieChartDataSeries ( { chartFormat : props . chartFormat , customSeriesOptions : props . customSeriesOptions , seriesColorAttribute : props . seriesColorAttribute , seriesDataSource : props . seriesDataSource , seriesName : props . seriesName , seriesSortAttribute : props . seriesSortAttribute , seriesSortOrder : props . seriesSortOrder , seriesValueAttribute : props . seriesValueAttribute , onClickAction : props . onClickAction , tooltipHoverText : props . tooltipHoverText } ) ; return ( < ChartWidget type = "PieChart" className = { classNames ( "widget-pie-chart" , props . class ) } data = { pieChartData } width = { props . width } widthUnit = { props . widthUnit } height = { props . height } heightUnit = { props . heightUnit } showLegend = { props . showLegend } xAxisLabel = { props . xAxisLabel ?. value } yAxisLabel = { props . yAxisLabel ?. value } gridLinesMode = "none" showSidebarEditor = { props . developerMode === "developer" } customLayout = { props . customLayout } customConfig = { props . customConfigurations } layoutOptions = { pieChartLayoutOptions } configOptions = { pieChartConfigOptions } seriesOptions = { pieChartSeriesOptions } enableThemeConfig = { props . enableThemeConfig } / > ) ; }