mirror of
https://github.com/apache/superset.git
synced 2024-09-19 12:09:42 -04:00
fix(plugin-chart-echarts): improve ECharts visuals (#806)
* feat(plugin-chart-echarts): add truncate y-axis feature * fix(plugin-chart-echarts): improve ECharts visuals * add desc ordering * address comments * simplify isNaN check
This commit is contained in:
Ville Brofeldt
Yongjie Zhao
parent
601af08ce9
commit
adaa5f89e6
@ -60,6 +60,7 @@
|
||||
"@superset-ui/legacy-plugin-chart-word-cloud": "^0.11.15",
|
||||
"@superset-ui/legacy-plugin-chart-world-map": "0.15.5",
|
||||
"@superset-ui/legacy-preset-chart-big-number": "0.15.5",
|
||||
"@superset-ui/plugin-chart-echarts": "0.15.6",
|
||||
"@superset-ui/plugin-chart-table": "0.15.5",
|
||||
"@superset-ui/plugin-chart-word-cloud": "0.15.5",
|
||||
"@types/react-bootstrap": "^0.32.22",
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { SuperChart, getChartTransformPropsRegistry } from '@superset-ui/core';
|
||||
import { boolean, select, withKnobs } from '@storybook/addon-knobs';
|
||||
import { boolean, number, select, withKnobs } from '@storybook/addon-knobs';
|
||||
import { EchartsPieChartPlugin } from '@superset-ui/plugin-chart-echarts';
|
||||
import transformProps from '@superset-ui/plugin-chart-echarts/lib/Pie/transformProps';
|
||||
import data from './data';
|
||||
import { weekday, population } from './data';
|
||||
|
||||
new EchartsPieChartPlugin().configure({ key: 'echarts-pie' }).register();
|
||||
|
||||
@ -14,21 +14,55 @@ export default {
|
||||
decorators: [withKnobs],
|
||||
};
|
||||
|
||||
export const Pie = ({ width, height }) => {
|
||||
export const WeekdayPie = ({ width, height }) => {
|
||||
return (
|
||||
<SuperChart
|
||||
chartType="echarts-pie"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data }}
|
||||
queryData={{ data: weekday }}
|
||||
formData={{
|
||||
colorScheme: 'supersetColors',
|
||||
groupby: ['Day'],
|
||||
metric: 'SUM(AIR_TIME)',
|
||||
numberFormat: 'SMART_NUMBER',
|
||||
donut: boolean('Donut', false),
|
||||
innerRadius: number('Inner Radius', 30),
|
||||
outerRadius: number('Outer Radius', 50),
|
||||
labelsOutside: boolean('Labels outside', true),
|
||||
labelLine: boolean('Label line', false),
|
||||
showLabels: boolean('Show labels', true),
|
||||
showLabelsThreshold: number('Percentage threshold', 0),
|
||||
showLegend: boolean('Show legend', false),
|
||||
pieLabelType: select(
|
||||
'Pie label type',
|
||||
['key', 'value', 'percent', 'key_value', 'key_percent', 'key_value_percent'],
|
||||
'key_value_percent',
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const PopulationPie = ({ width, height }) => {
|
||||
return (
|
||||
<SuperChart
|
||||
chartType="echarts-pie"
|
||||
width={width}
|
||||
height={height}
|
||||
queryData={{ data: population }}
|
||||
formData={{
|
||||
colorScheme: 'supersetColors',
|
||||
groupby: ['Country'],
|
||||
metric: 'Population',
|
||||
numberFormat: 'SMART_NUMBER',
|
||||
donut: boolean('Donut', false),
|
||||
innerRadius: number('Inner Radius', 30),
|
||||
outerRadius: number('Outer Radius', 50),
|
||||
labelsOutside: boolean('Labels outside', false),
|
||||
labelLine: boolean('Label line', false),
|
||||
showLabels: boolean('Show labels', true),
|
||||
showLabelsThreshold: number('Percentage threshold', 5),
|
||||
showLegend: boolean('Show legend', false),
|
||||
pieLabelType: select(
|
||||
'Pie label type',
|
||||
|
||||
@ -1,6 +1,223 @@
|
||||
export default [
|
||||
export const weekday = [
|
||||
{ Day: 'Friday', 'SUM(AIR_TIME)': 1943661 },
|
||||
{ Day: 'Saturday', 'SUM(AIR_TIME)': 1798845 },
|
||||
{ Day: 'Thursday', 'SUM(AIR_TIME)': 1626157 },
|
||||
{ Day: 'Sunday', 'SUM(AIR_TIME)': 1048653 },
|
||||
];
|
||||
|
||||
export const population = [
|
||||
{ Country: 'China', Population: 58345455000 },
|
||||
{ Country: 'India', Population: 46023037597 },
|
||||
{ Country: 'United States', Population: 13604468357 },
|
||||
{ Country: 'Indonesia', Population: 9357861231 },
|
||||
{ Country: 'Brazil', Population: 7752058955 },
|
||||
{ Country: 'Russian Federation', Population: 7667188460 },
|
||||
{ Country: 'Japan', Population: 6454620759 },
|
||||
{ Country: 'Pakistan', Population: 5696041480 },
|
||||
{ Country: 'Bangladesh', Population: 5549261462 },
|
||||
{ Country: 'Nigeria', Population: 5259800493 },
|
||||
{ Country: 'Mexico', Population: 4444653964 },
|
||||
{ Country: 'Germany', Population: 4361793335 },
|
||||
{ Country: 'Vietnam', Population: 3420037000 },
|
||||
{ Country: 'Philippines', Population: 3272015554 },
|
||||
{ Country: 'United Kingdom', Population: 3169118137 },
|
||||
{ Country: 'France', Population: 3151638853 },
|
||||
{ Country: 'Italy', Population: 3082869665 },
|
||||
{ Country: 'Egypt, Arab Rep.', Population: 2967887581 },
|
||||
{ Country: 'Thailand', Population: 2827157965 },
|
||||
{ Country: 'Turkey', Population: 2805220683 },
|
||||
{ Country: 'Ethiopia', Population: 2750952916 },
|
||||
{ Country: 'Iran, Islamic Rep.', Population: 2717528355 },
|
||||
{ Country: 'Ukraine', Population: 2657782543 },
|
||||
{ Country: 'Korea, Rep.', Population: 2216456927 },
|
||||
{ Country: 'Myanmar', Population: 2126848982 },
|
||||
{ Country: 'Spain', Population: 2115316751 },
|
||||
{ Country: 'Congo, Dem. Rep.', Population: 2015439254 },
|
||||
{ Country: 'Poland', Population: 1976772515 },
|
||||
{ Country: 'South Africa', Population: 1871083248 },
|
||||
{ Country: 'Colombia', Population: 1776189608 },
|
||||
{ Country: 'Argentina', Population: 1728332290 },
|
||||
{ Country: 'Canada', Population: 1470276931 },
|
||||
{ Country: 'Tanzania', Population: 1413734053 },
|
||||
{ Country: 'Algeria', Population: 1317290647 },
|
||||
{ Country: 'Morocco', Population: 1277441301 },
|
||||
{ Country: 'Kenya', Population: 1253201109 },
|
||||
{ Country: 'Romania', Population: 1171333228 },
|
||||
{ Country: 'Peru', Population: 1121937313 },
|
||||
{ Country: 'Sudan', Population: 1118903636 },
|
||||
{ Country: 'Uzbekistan', Population: 1053380227 },
|
||||
{ Country: 'Korea, Dem. Rep.', Population: 1047335229 },
|
||||
{ Country: 'Venezuela, RB', Population: 1036057583 },
|
||||
{ Country: 'Nepal', Population: 1007162709 },
|
||||
{ Country: 'Uganda', Population: 987376102 },
|
||||
{ Country: 'Iraq', Population: 983604177 },
|
||||
{ Country: 'Malaysia', Population: 978122682 },
|
||||
{ Country: 'Australia', Population: 903260509 },
|
||||
{ Country: 'Afghanistan', Population: 887557752 },
|
||||
{ Country: 'Sri Lanka', Population: 881137000 },
|
||||
{ Country: 'Saudi Arabia', Population: 828451525 },
|
||||
{ Country: 'Mozambique', Population: 807229371 },
|
||||
{ Country: 'Netherlands', Population: 803013980 },
|
||||
{ Country: 'Ghana', Population: 801844889 },
|
||||
{ Country: 'Kazakhstan', Population: 797168043 },
|
||||
{ Country: 'Chile', Population: 696739897 },
|
||||
{ Country: 'Yemen, Rep.', Population: 695646128 },
|
||||
{ Country: 'Cameroon', Population: 664127790 },
|
||||
{ Country: 'Syrian Arab Republic', Population: 663924524 },
|
||||
{ Country: 'Madagascar', Population: 656478313 },
|
||||
{ Country: 'Angola', Population: 641906296 },
|
||||
{ Country: "Cote d'Ivoire", Population: 634194484 },
|
||||
{ Country: 'Hungary', Population: 566995908 },
|
||||
{ Country: 'Czech Republic', Population: 559416359 },
|
||||
{ Country: 'Belgium', Population: 551921585 },
|
||||
{ Country: 'Cuba', Population: 550461345 },
|
||||
{ Country: 'Greece', Population: 547065293 },
|
||||
{ Country: 'Ecuador', Population: 537148542 },
|
||||
{ Country: 'Portugal', Population: 536945679 },
|
||||
{ Country: 'Belarus', Population: 524490000 },
|
||||
{ Country: 'Cambodia', Population: 523555378 },
|
||||
{ Country: 'Zimbabwe', Population: 509866860 },
|
||||
{ Country: 'Burkina Faso', Population: 505122912 },
|
||||
{ Country: 'Mali', Population: 500758830 },
|
||||
{ Country: 'Guatemala', Population: 498361800 },
|
||||
{ Country: 'Niger', Population: 471910464 },
|
||||
{ Country: 'Malawi', Population: 470725354 },
|
||||
{ Country: 'Sweden', Population: 468210684 },
|
||||
{ Country: 'Bulgaria', Population: 456247765 },
|
||||
{ Country: 'Zambia', Population: 438847085 },
|
||||
{ Country: 'Austria', Population: 426785647 },
|
||||
{ Country: 'Tunisia', Population: 415992799 },
|
||||
{ Country: 'Senegal', Population: 414475224 },
|
||||
{ Country: 'Haiti', Population: 377521290 },
|
||||
{ Country: 'Azerbaijan', Population: 374210660 },
|
||||
{ Country: 'Dominican Republic', Population: 373939753 },
|
||||
{ Country: 'Switzerland', Population: 369360744 },
|
||||
{ Country: 'Bolivia', Population: 368308373 },
|
||||
{ Country: 'Guinea', Population: 362469063 },
|
||||
{ Country: 'Chad', Population: 355875809 },
|
||||
{ Country: 'Rwanda', Population: 347121852 },
|
||||
{ Country: 'Somalia', Population: 332677926 },
|
||||
{ Country: 'South Sudan', Population: 319024522 },
|
||||
{ Country: 'Burundi', Population: 305731834 },
|
||||
{ Country: 'Hong Kong SAR, China', Population: 298353905 },
|
||||
{ Country: 'Benin', Population: 290736360 },
|
||||
{ Country: 'Denmark', Population: 283435789 },
|
||||
{ Country: 'Slovak Republic', Population: 276228375 },
|
||||
{ Country: 'Finland', Population: 271585488 },
|
||||
{ Country: 'Tajikistan', Population: 267603756 },
|
||||
{ Country: 'El Salvador', Population: 266413287 },
|
||||
{ Country: 'Israel', Population: 263866720 },
|
||||
{ Country: 'Honduras', Population: 257791863 },
|
||||
{ Country: 'Croatia', Population: 246197511 },
|
||||
{ Country: 'Georgia', Population: 241070850 },
|
||||
{ Country: 'Norway', Population: 233337059 },
|
||||
{ Country: 'Papua New Guinea', Population: 228299012 },
|
||||
{ Country: 'Lao PDR', Population: 227340983 },
|
||||
{ Country: 'Kyrgyz Republic', Population: 222809200 },
|
||||
{ Country: 'Paraguay', Population: 221768661 },
|
||||
{ Country: 'Libya', Population: 217716251 },
|
||||
{ Country: 'Bosnia and Herzegovina', Population: 215521543 },
|
||||
{ Country: 'Nicaragua', Population: 213048662 },
|
||||
{ Country: 'Togo', Population: 204624027 },
|
||||
{ Country: 'Sierra Leone', Population: 203443826 },
|
||||
{ Country: 'Ireland', Population: 196019322 },
|
||||
{ Country: 'Turkmenistan', Population: 189687365 },
|
||||
{ Country: 'New Zealand', Population: 187593600 },
|
||||
{ Country: 'Serbia', Population: 186596480 },
|
||||
{ Country: 'Moldova', Population: 186156257 },
|
||||
{ Country: 'Lithuania', Population: 182416949 },
|
||||
{ Country: 'Puerto Rico', Population: 181515497 },
|
||||
{ Country: 'Jordan', Population: 180850641 },
|
||||
{ Country: 'Singapore', Population: 173168000 },
|
||||
{ Country: 'Uruguay', Population: 167612670 },
|
||||
{ Country: 'Costa Rica', Population: 163515714 },
|
||||
{ Country: 'Lebanon', Population: 162031498 },
|
||||
{ Country: 'Eritrea', Population: 161125877 },
|
||||
{ Country: 'Armenia', Population: 160782905 },
|
||||
{ Country: 'Central African Republic', Population: 158650217 },
|
||||
{ Country: 'Albania', Population: 148154320 },
|
||||
{ Country: 'United Arab Emirates', Population: 134952923 },
|
||||
{ Country: 'Panama', Population: 130974461 },
|
||||
{ Country: 'Congo, Rep.', Population: 130701144 },
|
||||
{ Country: 'Latvia', Population: 130544986 },
|
||||
{ Country: 'Liberia', Population: 125666085 },
|
||||
{ Country: 'Jamaica', Population: 124779119 },
|
||||
{ Country: 'Mauritania', Population: 113489314 },
|
||||
{ Country: 'Mongolia', Population: 106717826 },
|
||||
{ Country: 'Slovenia', Population: 104119695 },
|
||||
{ Country: 'Macedonia, FYR', Population: 104100695 },
|
||||
{ Country: 'Oman', Population: 93132249 },
|
||||
{ Country: 'Kosovo', Population: 86627232 },
|
||||
{ Country: 'Kuwait', Population: 84737006 },
|
||||
{ Country: 'Lesotho', Population: 81971241 },
|
||||
{ Country: 'West Bank and Gaza', Population: 77390117 },
|
||||
{ Country: 'Estonia', Population: 77119567 },
|
||||
{ Country: 'Namibia', Population: 75238033 },
|
||||
{ Country: 'Botswana', Population: 70510085 },
|
||||
{ Country: 'Trinidad and Tobago', Population: 62771502 },
|
||||
{ Country: 'Guinea-Bissau', Population: 58400669 },
|
||||
{ Country: 'Mauritius', Population: 56066051 },
|
||||
{ Country: 'Gabon', Population: 52489952 },
|
||||
{ Country: 'Gambia, The', Population: 50232086 },
|
||||
{ Country: 'Cyprus', Population: 43711039 },
|
||||
{ Country: 'Swaziland', Population: 42858935 },
|
||||
{ Country: 'Timor-Leste', Population: 41694123 },
|
||||
{ Country: 'Guyana', Population: 39868752 },
|
||||
{ Country: 'Fiji', Population: 37505227 },
|
||||
{ Country: 'Montenegro', Population: 31652512 },
|
||||
{ Country: 'Qatar', Population: 30075210 },
|
||||
{ Country: 'Bahrain', Population: 29724096 },
|
||||
{ Country: 'Djibouti', Population: 26324244 },
|
||||
{ Country: 'Bhutan', Population: 25987074 },
|
||||
{ Country: 'Comoros', Population: 22692936 },
|
||||
{ Country: 'Suriname', Population: 22687861 },
|
||||
{ Country: 'Equatorial Guinea', Population: 22627794 },
|
||||
{ Country: 'Luxembourg', Population: 21852156 },
|
||||
{ Country: 'Malta', Population: 19363458 },
|
||||
{ Country: 'Cabo Verde', Population: 19178461 },
|
||||
{ Country: 'Macao SAR, China', Population: 18882494 },
|
||||
{ Country: 'Solomon Islands', Population: 16859526 },
|
||||
{ Country: 'Barbados', Population: 14146501 },
|
||||
{ Country: 'Iceland', Population: 13716537 },
|
||||
{ Country: 'Bahamas, The', Population: 13446111 },
|
||||
{ Country: 'Brunei Darussalam', Population: 13322318 },
|
||||
{ Country: 'Maldives', Population: 11478624 },
|
||||
{ Country: 'Belize', Population: 10571460 },
|
||||
{ Country: 'French Polynesia', Population: 9974982 },
|
||||
{ Country: 'New Caledonia', Population: 9225822 },
|
||||
{ Country: 'Samoa', Population: 8770470 },
|
||||
{ Country: 'Vanuatu', Population: 7966814 },
|
||||
{ Country: 'Curacao', Population: 7898637 },
|
||||
{ Country: 'Channel Islands', Population: 7515697 },
|
||||
{ Country: 'St. Lucia', Population: 7336842 },
|
||||
{ Country: 'Guam', Population: 6647797 },
|
||||
{ Country: 'Sao Tome and Principe', Population: 6169644 },
|
||||
{ Country: 'St. Vincent and the Grenadines', Population: 5557117 },
|
||||
{ Country: 'Grenada', Population: 5366107 },
|
||||
{ Country: 'Tonga', Population: 5038574 },
|
||||
{ Country: 'Virgin Islands (U.S.)', Population: 5006756 },
|
||||
{ Country: 'Micronesia, Fed. Sts.', Population: 4627492 },
|
||||
{ Country: 'Aruba', Population: 4048374 },
|
||||
{ Country: 'Antigua and Barbuda', Population: 3887170 },
|
||||
{ Country: 'Dominica', Population: 3881071 },
|
||||
{ Country: 'Kiribati', Population: 3874990 },
|
||||
{ Country: 'Seychelles', Population: 3761184 },
|
||||
{ Country: 'Isle of Man', Population: 3728525 },
|
||||
{ Country: 'Bermuda', Population: 3159267 },
|
||||
{ Country: 'Greenland', Population: 2807533 },
|
||||
{ Country: 'Andorra', Population: 2704725 },
|
||||
{ Country: 'St. Kitts and Nevis', Population: 2535482 },
|
||||
{ Country: 'Faeroe Islands', Population: 2399439 },
|
||||
{ Country: 'American Samoa', Population: 2294886 },
|
||||
{ Country: 'Marshall Islands', Population: 2086174 },
|
||||
{ Country: 'Northern Mariana Islands', Population: 2015842 },
|
||||
{ Country: 'Monaco', Population: 1595554 },
|
||||
{ Country: 'Liechtenstein', Population: 1527171 },
|
||||
{ Country: 'Cayman Islands', Population: 1480956 },
|
||||
{ Country: 'San Marino', Population: 1298411 },
|
||||
{ Country: 'St. Martin (French part)', Population: 1020457 },
|
||||
{ Country: 'Palau', Population: 833299 },
|
||||
{ Country: 'Turks and Caicos Islands', Population: 775185 },
|
||||
{ Country: 'Sint Maarten (Dutch part)', Population: 597781 },
|
||||
{ Country: 'Tuvalu', Population: 466709 },
|
||||
];
|
||||
|
||||
@ -27,6 +27,7 @@ import {
|
||||
import { BoxPlotQueryFormData } from './types';
|
||||
import { EchartsProps } from '../types';
|
||||
import { extractGroupbyLabel } from '../utils/series';
|
||||
import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
|
||||
|
||||
export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
@ -109,11 +110,11 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
// @ts-ignore
|
||||
const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesBoxplot> = {
|
||||
grid: {
|
||||
...defaultGrid,
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
left: 20,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@ -121,12 +122,13 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
axisLabel,
|
||||
},
|
||||
yAxis: {
|
||||
...defaultYAxis,
|
||||
type: 'value',
|
||||
axisLabel: { formatter: numberFormatter },
|
||||
},
|
||||
tooltip: {
|
||||
...defaultTooltip,
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
|
||||
@ -19,5 +19,11 @@
|
||||
import { buildQueryContext, QueryFormData } from '@superset-ui/core';
|
||||
|
||||
export default function buildQuery(formData: QueryFormData) {
|
||||
return buildQueryContext(formData);
|
||||
const { metric } = formData;
|
||||
return buildQueryContext(formData, baseQueryObject => [
|
||||
{
|
||||
...baseQueryObject,
|
||||
orderby: [[metric, false]],
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
@ -19,6 +19,8 @@
|
||||
import { t, validateNonEmpty } from '@superset-ui/core';
|
||||
import { ControlPanelConfig, D3_FORMAT_OPTIONS } from '@superset-ui/chart-controls';
|
||||
|
||||
const noopControl = { name: 'noop', config: { type: '', renderTrigger: true } };
|
||||
|
||||
const config: ControlPanelConfig = {
|
||||
controlPanelSections: [
|
||||
{
|
||||
@ -97,6 +99,8 @@ const config: ControlPanelConfig = {
|
||||
description: t('Whether to display the labels.'),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'labels_outside',
|
||||
config: {
|
||||
@ -107,8 +111,32 @@ const config: ControlPanelConfig = {
|
||||
description: t('Put the labels outside of the pie?'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'label_line',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Label Line'),
|
||||
default: false,
|
||||
renderTrigger: true,
|
||||
description: t('Draw line from Pie to label when labels outside?'),
|
||||
},
|
||||
},
|
||||
],
|
||||
['color_scheme', 'label_colors'],
|
||||
[
|
||||
{
|
||||
name: 'show_labels_threshold',
|
||||
config: {
|
||||
type: 'TextControl',
|
||||
label: t('Percentage threshold'),
|
||||
renderTrigger: true,
|
||||
isFloat: true,
|
||||
default: 5,
|
||||
description: t('Minimum threshold in percentage points for showing labels.'),
|
||||
},
|
||||
},
|
||||
noopControl,
|
||||
],
|
||||
['color_scheme', noopControl],
|
||||
[
|
||||
{
|
||||
name: 'outerRadius',
|
||||
|
||||
@ -28,6 +28,7 @@ import {
|
||||
import { EchartsPieLabelType, PieChartFormData } from './types';
|
||||
import { EchartsProps } from '../types';
|
||||
import { extractGroupbyLabel } from '../utils/series';
|
||||
import { defaultGrid, defaultTooltip } from '../defaults';
|
||||
|
||||
const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
|
||||
|
||||
@ -63,11 +64,13 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
groupby,
|
||||
innerRadius = 30,
|
||||
labelsOutside = true,
|
||||
labelLine = false,
|
||||
metric,
|
||||
numberFormat,
|
||||
outerRadius = 50,
|
||||
pieLabelType = 'value',
|
||||
showLabels = true,
|
||||
showLabelsThreshold = 5,
|
||||
showLegend = false,
|
||||
} = formData as PieChartFormData;
|
||||
const { label: metricLabel } = convertMetric(metric);
|
||||
@ -87,19 +90,27 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
};
|
||||
});
|
||||
|
||||
const formatter = (params: { name: string; value: number; percent: number }) =>
|
||||
formatPieLabel({ params, numberFormatter, pieLabelType });
|
||||
const formatter = (params: { name: string; value: number; percent: number }) => {
|
||||
if (params.percent < showLabelsThreshold) return '';
|
||||
return formatPieLabel({ params, numberFormatter, pieLabelType });
|
||||
};
|
||||
|
||||
const defaultLabel = {
|
||||
formatter,
|
||||
show: showLabels,
|
||||
color: '#000000',
|
||||
};
|
||||
|
||||
const echartOptions: echarts.EChartOption<echarts.EChartOption.SeriesPie> = {
|
||||
grid: {
|
||||
...defaultGrid,
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
left: 30,
|
||||
right: 30,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
confine: true,
|
||||
...defaultTooltip,
|
||||
trigger: 'item',
|
||||
formatter: params => {
|
||||
return formatPieLabel({
|
||||
@ -122,24 +133,21 @@ export default function transformProps(chartProps: ChartProps): EchartsProps {
|
||||
radius: [`${donut ? innerRadius : 0}%`, `${outerRadius}%`],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
labelLine: labelsOutside ? { show: true } : { show: false },
|
||||
labelLine: labelLine ? { show: true } : { show: false },
|
||||
label: labelsOutside
|
||||
? {
|
||||
formatter,
|
||||
...defaultLabel,
|
||||
position: 'outer',
|
||||
show: showLabels,
|
||||
alignTo: 'none',
|
||||
bleedMargin: 5,
|
||||
}
|
||||
: {
|
||||
formatter,
|
||||
...defaultLabel,
|
||||
position: 'inner',
|
||||
show: showLabels,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 30,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { t, legacyValidateInteger, legacyValidateNumber } from '@superset-ui/core';
|
||||
import { ControlPanelConfig } from '@superset-ui/chart-controls';
|
||||
|
||||
@ -180,7 +181,6 @@ const config: ControlPanelConfig = {
|
||||
},
|
||||
},
|
||||
],
|
||||
['y_axis_format'],
|
||||
[
|
||||
{
|
||||
name: 'stack',
|
||||
@ -242,6 +242,21 @@ const config: ControlPanelConfig = {
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'zoomable',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Data Zoom'),
|
||||
default: false,
|
||||
renderTrigger: true,
|
||||
description: t('Enable data zooming controls'),
|
||||
},
|
||||
},
|
||||
],
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<h1 className="section-header">{t('Y Axis')}</h1>],
|
||||
['y_axis_format'],
|
||||
[
|
||||
{
|
||||
name: 'logAxis',
|
||||
@ -266,13 +281,32 @@ const config: ControlPanelConfig = {
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'zoomable',
|
||||
name: 'truncateYAxis',
|
||||
config: {
|
||||
type: 'CheckboxControl',
|
||||
label: t('Data Zoom'),
|
||||
default: false,
|
||||
label: t('Truncate Y Axis'),
|
||||
default: true,
|
||||
renderTrigger: true,
|
||||
description: t('Enable data zooming controls'),
|
||||
description: t(
|
||||
'Truncate Y Axis. Can be overridden by specifying a min or max bound.',
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: 'y_axis_bounds',
|
||||
config: {
|
||||
type: 'BoundsControl',
|
||||
label: t('Y Axis Bounds'),
|
||||
renderTrigger: true,
|
||||
default: [null, null],
|
||||
description: t(
|
||||
'Bounds for the Y-axis. When left empty, the bounds are ' +
|
||||
'dynamically defined based on the min/max of the data. Note that ' +
|
||||
"this feature will only expand the axis range. It won't " +
|
||||
"narrow the data's extent.",
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -31,6 +31,7 @@ import {
|
||||
formatProphetTooltipSeries,
|
||||
rebaseTimeseriesDatum,
|
||||
} from '../utils/prophet';
|
||||
import { defaultGrid, defaultTooltip, defaultYAxis } from '../defaults';
|
||||
|
||||
export default function transformProps(chartProps: ChartProps): EchartsTimeseriesProps {
|
||||
const { width, height, formData, queryData } = chartProps;
|
||||
@ -46,7 +47,9 @@ export default function transformProps(chartProps: ChartProps): EchartsTimeserie
|
||||
markerEnabled,
|
||||
markerSize,
|
||||
minorSplitLine,
|
||||
truncateYAxis,
|
||||
yAxisFormat,
|
||||
yAxisBounds,
|
||||
zoomable,
|
||||
} = formData;
|
||||
|
||||
@ -109,26 +112,40 @@ export default function transformProps(chartProps: ChartProps): EchartsTimeserie
|
||||
: 0,
|
||||
});
|
||||
});
|
||||
|
||||
// yAxisBounds sometimes starts returning NaNs, which messes up the u-axis
|
||||
let [min, max] = (yAxisBounds || [])
|
||||
.map(Number)
|
||||
.map((val: number) => (Number.isNaN(val) ? undefined : val));
|
||||
|
||||
// default to 0-100% range when doing row-level contribution chart
|
||||
if (contributionMode === 'row' && stack) {
|
||||
if (min === undefined) min = 0;
|
||||
if (max === undefined) max = 1;
|
||||
}
|
||||
|
||||
const echartOptions: echarts.EChartOption = {
|
||||
grid: {
|
||||
...defaultGrid,
|
||||
top: 30,
|
||||
bottom: zoomable ? 80 : 0,
|
||||
left: 20,
|
||||
right: 20,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: { type: 'time' },
|
||||
yAxis: {
|
||||
...defaultYAxis,
|
||||
type: logAxis ? 'log' : 'value',
|
||||
min: contributionMode === 'row' && stack ? 0 : undefined,
|
||||
max: contributionMode === 'row' && stack ? 1 : undefined,
|
||||
min,
|
||||
max,
|
||||
minorTick: { show: true },
|
||||
minorSplitLine: { show: minorSplitLine },
|
||||
axisLabel: { formatter },
|
||||
scale: truncateYAxis,
|
||||
},
|
||||
tooltip: {
|
||||
...defaultTooltip,
|
||||
trigger: 'axis',
|
||||
confine: true,
|
||||
formatter: params => {
|
||||
// @ts-ignore
|
||||
const rows = [`${smartDateVerboseFormatter(params[0].value[0])}`];
|
||||
@ -148,7 +165,6 @@ export default function transformProps(chartProps: ChartProps): EchartsTimeserie
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
data: rawSeries
|
||||
.filter(
|
||||
entry =>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
export const defaultGrid = {
|
||||
containLabel: true,
|
||||
};
|
||||
|
||||
export const defaultTooltip = {
|
||||
confine: true,
|
||||
};
|
||||
|
||||
export const defaultYAxis = {
|
||||
scale: true,
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user