| | |
| | | import PanelCard from '../../components/panel-card.vue'; |
| | | import ScreenCameraPreview from '../../components/screen-camera-preview.vue'; |
| | | import { TIME_RANGE_OPTIONS } from '../../data/screen'; |
| | | import { chartSeries, pieTooltipFormatter, toPieData } from '../../data/screen-chart'; |
| | | import { useChartTheme, useScreenData, useScreenFieldSource } from '../../hooks/use-screen'; |
| | | |
| | | const { data, timeRange } = useScreenData(); |
| | |
| | | ]); |
| | | |
| | | const mixOption = computed(() => ({ |
| | | tooltip: { trigger: 'item', formatter: '{b}<br/>{c} ({d}%)', ...tooltip() }, |
| | | tooltip: { trigger: 'item', ...tooltip(), formatter: pieTooltipFormatter() }, |
| | | legend: { bottom: 0, textStyle: { color: mutedColor.value } }, |
| | | series: [ |
| | | { |
| | |
| | | padAngle: 3, |
| | | itemStyle: { borderRadius: 6 }, |
| | | label: { color: textColor.value, formatter: '{b}\n{d}%' }, |
| | | data: data.value.wasteMix.map(e => ({ |
| | | name: e.name, |
| | | value: e[mixMetric.value], |
| | | itemStyle: { color: e.color } |
| | | })) |
| | | data: toPieData( |
| | | chartSeries(data.value.wasteMix, e => e[mixMetric.value]), |
| | | e => e.name, |
| | | e => e.color |
| | | ) |
| | | } |
| | | ] |
| | | })); |