feat: echarts gauge chart (#993)

* feat: echarts gauge chart

* remove unused legend imports

* move font size multipliers to constants

* add tests

* rename roundcap

* add modulo on color picking to wrap around the color scheme

Co-authored-by: Ivan Krsnik <[email protected]>

plugins/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx

@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 React from 'react';
+import { EchartsProps } from '../types';
+import Echart from '../components/Echart';
+
+export default function EchartsGauge({ height, width, echartOptions }: EchartsProps) {
+  return <Echart height={height} width={width} echartOptions={echartOptions} />;
+}

plugins/plugin-chart-echarts/src/Gauge/buildQuery.ts

@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { buildQueryContext, QueryFormData } from '@superset-ui/core';
+
+export default function buildQuery(formData: QueryFormData) {
+  return buildQueryContext(formData, baseQueryObject => [
+    {
+      ...baseQueryObject,
+      groupby: formData.groupby || [],
+    },
+  ]);
+}

plugins/plugin-chart-echarts/src/Gauge/constants.ts

@@ -0,0 +1,80 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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 { GaugeSeriesOption } from 'echarts';
+
+export const DEFAULT_GAUGE_SERIES_OPTION: GaugeSeriesOption = {
+  splitLine: {
+    lineStyle: {
+      color: '#63677A',
+    },
+  },
+  axisLine: {
+    lineStyle: {
+      color: [[1, '#E6EBF8']],
+    },
+  },
+  axisLabel: {
+    color: '#464646',
+  },
+  axisTick: {
+    lineStyle: {
+      width: 2,
+      color: '#63677A',
+    },
+  },
+  detail: {
+    color: 'auto',
+  },
+};
+
+export const INTERVAL_GAUGE_SERIES_OPTION: GaugeSeriesOption = {
+  splitLine: {
+    lineStyle: {
+      color: 'auto',
+    },
+  },
+  axisTick: {
+    lineStyle: {
+      color: 'auto',
+    },
+  },
+  axisLabel: {
+    color: 'auto',
+  },
+  pointer: {
+    itemStyle: {
+      color: 'auto',
+    },
+  },
+};
+
+export const OFFSETS = {
+  ticksFromLine: 10,
+  titleFromCenter: 20,
+};
+
+export const FONT_SIZE_MULTIPLIERS = {
+  axisTickLength: 0.25,
+  axisLabelDistance: 1.2,
+  splitLineLength: 1,
+  splitLineWidth: 0.25,
+  titleOffsetFromTitle: 2,
+  detailOffsetFromTitle: 0.9,
+  detailFontSize: 1.2,
+};