feat: external plugin panel radar

plugins/panel/radar/Editor.tsx

@@ -0,0 +1,112 @@
+// Copyright 2023 Datav.io Team
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Select, Switch, Textarea } from "@chakra-ui/react"
+import PanelAccordion from "src/views/dashboard/edit-panel/Accordion"
+import PanelEditItem from "src/views/dashboard/edit-panel/PanelEditItem"
+import { Panel, PanelEditorProps } from "types/dashboard"
+import React, { memo } from "react";
+import { useStore } from "@nanostores/react"
+import { commonMsg } from "src/i18n/locales/en"
+import { PluginSettings, initSettings, } from "./types"
+import { dispatch } from "use-bus";
+import { PanelForceRebuildEvent } from "src/data/bus-events";
+import { defaultsDeep } from "lodash";
+import RadionButtons from "components/RadioButtons";
+import { EditorNumberItem } from "components/editor/EditorItem";
+
+
+const PanelEditor = memo(({ panel, onChange }: PanelEditorProps) => {
+    const t = useStore(commonMsg)
+    panel.plugins[panel.type] = defaultsDeep(panel.plugins[panel.type], initSettings)
+    const options: PluginSettings = panel.plugins[panel.type]
+    return (
+        <>
+            <PanelAccordion title={t.basicSetting}>
+                <PanelEditItem title={t.animation} desc={t.animationTips}>
+                    <Switch defaultChecked={options.animation} onChange={e => onChange((panel: Panel) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.animation = e.currentTarget.checked
+                        // force the panel to rebuild to avoid some problems
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    })} />
+                </PanelEditItem>
+                <PanelEditItem title={'radar.shape'}>
+                    <Select value={options.radar.shape} onChange={(e) => onChange(panel => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.radar.shape = e.currentTarget.value
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    })}>
+                        {
+                            ['polygon', 'circle'].map(i => <option value={i}>{i}</option>)
+                        }
+                    </Select>
+                </PanelEditItem>
+            </PanelAccordion>
+            <PanelAccordion title={'Legend'}>
+                <PanelEditItem title={t.mode}>
+                    <RadionButtons options={[{ label: "Show", value: true }, { label: "Hidden", value: false }]} value={options.graph.legend.mode} onChange={v => onChange((panel: Panel) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.mode = v
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    })} />
+                </PanelEditItem>
+                <PanelEditItem title="orient">
+                    <Select value={options.graph.legend.orient} onChange={e => onChange(panel => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.orient = e.currentTarget.value
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    })}>
+                        {['horizontal', 'vertical'].map(i => <option value={i}>{i}</option>)}
+                    </Select>
+                </PanelEditItem>
+                <PanelEditItem title={'top'}>
+                    <EditorNumberItem value={options.graph.legend.top} onChange={(e) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.top = e
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    }} />
+                </PanelEditItem>
+                <PanelEditItem title={'bottom'}>
+                    <EditorNumberItem value={options.graph.legend.bottom} onChange={(e) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.bottom = e
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    }} />
+                </PanelEditItem>
+                <PanelEditItem title={'left'}>
+                    <EditorNumberItem value={options.graph.legend.left} onChange={(e) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.left = e
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    }} />
+                </PanelEditItem>
+                <PanelEditItem title={'right'}>
+                    <EditorNumberItem value={options.graph.legend.right} onChange={(e) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.right = e
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    }} />
+                </PanelEditItem>
+                <PanelEditItem title={'itemGap'}>
+                    <EditorNumberItem value={options.graph.legend.itemGap} onChange={(e) => {
+                        const plugin: PluginSettings = panel.plugins[panel.type]
+                        plugin.graph.legend.itemGap = e
+                        dispatch(PanelForceRebuildEvent + panel.id)
+                    }} />
+                </PanelEditItem>
+            </PanelAccordion >
+        </>
+    )
+})
+
+export default PanelEditor

plugins/panel/radar/OverrideEditor.tsx

@@ -0,0 +1,38 @@
+// Copyright 2023 Datav.io Team
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { OverrideRule } from "types/dashboard";
+import React from "react";
+
+interface Props {
+    override: OverrideRule
+    onChange: any
+}
+
+
+const OverrideEditor = (props: Props) => {
+    return <></>
+}
+
+export default OverrideEditor
+
+export enum OverrideRules {
+    // basic
+}
+
+// The above example will get targets from SeriesData, Table and Graph panels are using this method to get targets
+// If return [] or null or undefined, Datav will use the default function to get override targets
+export const getOverrideTargets = (panel, data) => {
+    // for demonstration purpose, we just return a hard coded targets list
+    return []
+}

plugins/panel/radar/Panel.tsx

@@ -0,0 +1,69 @@
+// Copyright 2023 Datav.io Team
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box, Center, Text, useColorMode } from "@chakra-ui/react";
+import ChartComponent from "src/components/charts/Chart";
+import { memo, useMemo, useState } from "react";
+import { PanelProps } from "types/dashboard"
+import { FieldType, SeriesData } from "types/seriesData";
+import React from "react";
+import { isEmpty } from "utils/validate";
+import NoData from "src/views/dashboard/components/PanelNoData";
+import { defaultsDeep } from "lodash";
+import { PluginSettings, initSettings } from "./types";
+import { buildOptions } from "./buildOptions";
+import mockData from './mockData.json'
+import { isSeriesData } from "utils/seriesData";
+
+interface Props extends PanelProps {
+    data: SeriesData[][]
+}
+
+const PanelComponentWrapper = memo((props: Props) => {
+    const d: SeriesData[] = props.data.flat()
+    if (isEmpty(d)) {
+        return <Center height="100%"><NoData /></Center>
+    }
+
+    return (<>
+        <PanelComponent {...props} />
+    </>
+    )
+})
+
+export default PanelComponentWrapper
+
+const PanelComponent = (props: Props) => {
+    const { panel, height, width } = props
+    const [chart, setChart] = useState(null)
+    const { colorMode } = useColorMode()
+
+
+    // init panel plugin settings
+    props.panel.plugins[panel.type] = defaultsDeep(props.panel.plugins[panel.type], initSettings)
+    // give plugin settings a name for easy access
+    const options: PluginSettings = props.panel.plugins[panel.type]
+
+    const echartOptions = useMemo(() => {
+        // transform SeriesData to candlestick data format 
+        const option = buildOptions(panel, props.data.flat(), colorMode)
+        return option
+    }, [props.data, panel.overrides, colorMode, options])
+
+    return (<>
+        {options && <Box height={height} key={colorMode} className="echarts-panel"><ChartComponent options={echartOptions} theme={colorMode} width={width} height={height} onChartCreated={c => setChart(c)} onChartEvents={null} /></Box>}
+    </>)
+}
+
+export const mockDataForTestDataDs = () => {
+    return mockData
+}

plugins/panel/radar/buildOptions.ts

@@ -0,0 +1,50 @@
+import { Panel } from "types/dashboard";
+import { SeriesData } from "types/seriesData";
+import { PluginSettings } from "./types";
+
+
+export const buildOptions = (panel: Panel, data: SeriesData[], colorMode: "light" | "dark") => {
+    const options: PluginSettings = panel.plugins[panel.type]
+
+    const legend = data.map(item => item.name)
+    const seriesData = legend.map(i => ({ name: i, value: [] }))
+    const indicator = {}
+    data.forEach(item => {
+        item.fields.forEach(field => {
+            const total = field.values.reduce((a, b) => a + b)
+            if (indicator[field.name] && indicator[field.name] > total) {
+                indicator[field.name] = field.values.reduce((a, b) => a + b)
+            } else {
+                indicator[field.name] = field.values.reduce((a, b) => a + b)
+            }
+            const idx = seriesData.findIndex(i => i.name === item.name)
+            seriesData[idx].value.push(total)
+        })
+    })
+    const opts = {
+        darkMode: colorMode === 'dark',
+        legend: {
+            data: legend,
+            show: options.graph.legend.mode,
+            top: options.graph.legend.top,
+            bottom: options.graph.legend.bottom,
+            left: options.graph.legend.left,
+            right: options.graph.legend.right,
+            orient: options.graph.legend.orient,
+            itemGap: options.graph.legend.itemGap,
+        },
+        animation: options.animation,
+        radar: {
+            shape: options.radar.shape,
+            indicator: Object.keys(indicator).map(key => ({ name: key, value: indicator[key] * 1.25 })),
+        },
+        series: [
+            {
+                type: 'radar',
+                data: seriesData,
+            }
+        ]
+    }
+
+    return opts
+}