mirror of https://github.com/apache/superset.git
fix(plugin-chart-echarts): missing value format in mixed timeseries (#21044)
This commit is contained in:
parent
a8ba544e60
commit
2d1ba46844
|
@ -31,6 +31,7 @@ import {
|
|||
MixedTimeseriesTransformProps,
|
||||
} from '@superset-ui/plugin-chart-echarts';
|
||||
import data from '../Timeseries/data';
|
||||
import negativeNumData from './negativeData';
|
||||
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
|
||||
|
||||
new EchartsTimeseriesChartPlugin()
|
||||
|
@ -57,6 +58,8 @@ export const Timeseries = ({ width, height }) => {
|
|||
Boston: row.Boston,
|
||||
}))
|
||||
.filter(row => !!row.Boston),
|
||||
colnames: ['__timestamp'],
|
||||
coltypes: [2],
|
||||
},
|
||||
{
|
||||
data: data
|
||||
|
@ -82,8 +85,13 @@ export const Timeseries = ({ width, height }) => {
|
|||
logAxis: boolean('Log axis', false),
|
||||
xAxisTimeFormat: 'smart_date',
|
||||
tooltipTimeFormat: 'smart_date',
|
||||
yAxisFormat: 'SMART_NUMBER',
|
||||
yAxisFormat: select(
|
||||
'y-axis format',
|
||||
['$,.2f', 'SMART_NUMBER'],
|
||||
'$,.2f',
|
||||
),
|
||||
yAxisTitle: text('Y Axis title', ''),
|
||||
yAxisIndexB: select('yAxisIndexB', [0, 1], 1),
|
||||
minorSplitLine: boolean('Query 1: Minor splitline', false),
|
||||
seriesType: select(
|
||||
'Query 1: Line type',
|
||||
|
@ -105,7 +113,61 @@ export const Timeseries = ({ width, height }) => {
|
|||
markerEnabledB: boolean('Query 2: Enable markers', false),
|
||||
markerSizeB: number('Query 2: Marker Size', 6),
|
||||
opacityB: number('Query 2: Opacity', 0.2),
|
||||
showValue: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithNegativeNumbers = ({ width, height }) => (
|
||||
<SuperChart
|
||||
chartType="mixed-timeseries"
|
||||
width={width}
|
||||
height={height}
|
||||
queriesData={[
|
||||
{
|
||||
data: negativeNumData,
|
||||
colnames: ['__timestamp'],
|
||||
coltypes: [2],
|
||||
},
|
||||
{
|
||||
data: negativeNumData.map(({ __timestamp, Boston }) => ({
|
||||
__timestamp,
|
||||
avgRate: Boston / 100,
|
||||
})),
|
||||
},
|
||||
]}
|
||||
formData={{
|
||||
contributionMode: undefined,
|
||||
colorScheme: 'supersetColors',
|
||||
seriesType: select(
|
||||
'Line type',
|
||||
['line', 'scatter', 'smooth', 'bar', 'start', 'middle', 'end'],
|
||||
'line',
|
||||
),
|
||||
xAxisTimeFormat: 'smart_date',
|
||||
yAxisFormat: select(
|
||||
'y-axis format',
|
||||
{
|
||||
'Original value': '~g',
|
||||
'Smart number': 'SMART_NUMBER',
|
||||
'(12345.432 => $12,345.43)': '$,.2f',
|
||||
},
|
||||
'$,.2f',
|
||||
),
|
||||
stack: true,
|
||||
showValue: boolean('Query 1: Show Value', true),
|
||||
showValueB: boolean('Query 2: Show Value', false),
|
||||
showLegend: true,
|
||||
markerEnabledB: true,
|
||||
yAxisIndexB: select(
|
||||
'Query 2: Y Axis',
|
||||
{
|
||||
Primary: 0,
|
||||
Secondary: 1,
|
||||
},
|
||||
1,
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
* 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 default [
|
||||
{
|
||||
__timestamp: 1619827200000,
|
||||
Boston: 10.8812312312,
|
||||
Washington: -45.3089432023,
|
||||
JerseyCity: -23.0509234029834,
|
||||
},
|
||||
{
|
||||
__timestamp: 1622505600000,
|
||||
Boston: 80.81029340234,
|
||||
Washington: -10.299023489023,
|
||||
JerseyCity: 53.54239402349,
|
||||
},
|
||||
{
|
||||
__timestamp: 1625097600000,
|
||||
Boston: 30.9129034924,
|
||||
Washington: 100.25234902349,
|
||||
JerseyCity: 27.17239402394,
|
||||
},
|
||||
{
|
||||
__timestamp: 1627776000000,
|
||||
Boston: 42.6129034924,
|
||||
Washington: 90.23234902349,
|
||||
JerseyCity: -32.23239402394,
|
||||
},
|
||||
];
|
|
@ -47,6 +47,8 @@ import {
|
|||
getAxisType,
|
||||
getColtypesMapping,
|
||||
getLegendProps,
|
||||
extractDataTotalValues,
|
||||
extractShowValueIndexes,
|
||||
} from '../utils/series';
|
||||
import {
|
||||
extractAnnotationLabels,
|
||||
|
@ -140,6 +142,7 @@ export default function transformProps(
|
|||
yAxisTitlePosition,
|
||||
sliceId,
|
||||
timeGrainSqla,
|
||||
percentageThreshold,
|
||||
}: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
|
||||
|
||||
const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
|
||||
|
@ -185,7 +188,28 @@ export default function transformProps(
|
|||
rawSeriesB.forEach(seriesOption =>
|
||||
mapSeriesIdToAxis(seriesOption, yAxisIndexB),
|
||||
);
|
||||
|
||||
const showValueIndexesA = extractShowValueIndexes(rawSeriesA, {
|
||||
stack,
|
||||
});
|
||||
const showValueIndexesB = extractShowValueIndexes(rawSeriesB, {
|
||||
stack,
|
||||
});
|
||||
const { totalStackedValues, thresholdValues } = extractDataTotalValues(
|
||||
rebasedDataA,
|
||||
{
|
||||
stack,
|
||||
percentageThreshold,
|
||||
xAxisCol,
|
||||
},
|
||||
);
|
||||
const {
|
||||
totalStackedValues: totalStackedValuesB,
|
||||
thresholdValues: thresholdValuesB,
|
||||
} = extractDataTotalValues(rebasedDataB, {
|
||||
stack: Boolean(stackB),
|
||||
percentageThreshold,
|
||||
xAxisCol,
|
||||
});
|
||||
rawSeriesA.forEach(entry => {
|
||||
const transformedSeries = transformSeries(entry, colorScale, {
|
||||
area,
|
||||
|
@ -200,6 +224,10 @@ export default function transformProps(
|
|||
seriesKey: entry.name,
|
||||
sliceId,
|
||||
queryIndex: 0,
|
||||
formatter,
|
||||
showValueIndexes: showValueIndexesA,
|
||||
totalStackedValues,
|
||||
thresholdValues,
|
||||
});
|
||||
if (transformedSeries) series.push(transformedSeries);
|
||||
});
|
||||
|
@ -220,6 +248,10 @@ export default function transformProps(
|
|||
: entry.name,
|
||||
sliceId,
|
||||
queryIndex: 1,
|
||||
formatter: formatterSecondary,
|
||||
showValueIndexes: showValueIndexesB,
|
||||
totalStackedValues: totalStackedValuesB,
|
||||
thresholdValues: thresholdValuesB,
|
||||
});
|
||||
if (transformedSeries) series.push(transformedSeries);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue