mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
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,
|
MixedTimeseriesTransformProps,
|
||||||
} from '@superset-ui/plugin-chart-echarts';
|
} from '@superset-ui/plugin-chart-echarts';
|
||||||
import data from '../Timeseries/data';
|
import data from '../Timeseries/data';
|
||||||
|
import negativeNumData from './negativeData';
|
||||||
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
|
import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
|
||||||
|
|
||||||
new EchartsTimeseriesChartPlugin()
|
new EchartsTimeseriesChartPlugin()
|
||||||
@ -57,6 +58,8 @@ export const Timeseries = ({ width, height }) => {
|
|||||||
Boston: row.Boston,
|
Boston: row.Boston,
|
||||||
}))
|
}))
|
||||||
.filter(row => !!row.Boston),
|
.filter(row => !!row.Boston),
|
||||||
|
colnames: ['__timestamp'],
|
||||||
|
coltypes: [2],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
data: data
|
data: data
|
||||||
@ -82,8 +85,13 @@ export const Timeseries = ({ width, height }) => {
|
|||||||
logAxis: boolean('Log axis', false),
|
logAxis: boolean('Log axis', false),
|
||||||
xAxisTimeFormat: 'smart_date',
|
xAxisTimeFormat: 'smart_date',
|
||||||
tooltipTimeFormat: 'smart_date',
|
tooltipTimeFormat: 'smart_date',
|
||||||
yAxisFormat: 'SMART_NUMBER',
|
yAxisFormat: select(
|
||||||
|
'y-axis format',
|
||||||
|
['$,.2f', 'SMART_NUMBER'],
|
||||||
|
'$,.2f',
|
||||||
|
),
|
||||||
yAxisTitle: text('Y Axis title', ''),
|
yAxisTitle: text('Y Axis title', ''),
|
||||||
|
yAxisIndexB: select('yAxisIndexB', [0, 1], 1),
|
||||||
minorSplitLine: boolean('Query 1: Minor splitline', false),
|
minorSplitLine: boolean('Query 1: Minor splitline', false),
|
||||||
seriesType: select(
|
seriesType: select(
|
||||||
'Query 1: Line type',
|
'Query 1: Line type',
|
||||||
@ -105,7 +113,61 @@ export const Timeseries = ({ width, height }) => {
|
|||||||
markerEnabledB: boolean('Query 2: Enable markers', false),
|
markerEnabledB: boolean('Query 2: Enable markers', false),
|
||||||
markerSizeB: number('Query 2: Marker Size', 6),
|
markerSizeB: number('Query 2: Marker Size', 6),
|
||||||
opacityB: number('Query 2: Opacity', 0.2),
|
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,
|
getAxisType,
|
||||||
getColtypesMapping,
|
getColtypesMapping,
|
||||||
getLegendProps,
|
getLegendProps,
|
||||||
|
extractDataTotalValues,
|
||||||
|
extractShowValueIndexes,
|
||||||
} from '../utils/series';
|
} from '../utils/series';
|
||||||
import {
|
import {
|
||||||
extractAnnotationLabels,
|
extractAnnotationLabels,
|
||||||
@ -140,6 +142,7 @@ export default function transformProps(
|
|||||||
yAxisTitlePosition,
|
yAxisTitlePosition,
|
||||||
sliceId,
|
sliceId,
|
||||||
timeGrainSqla,
|
timeGrainSqla,
|
||||||
|
percentageThreshold,
|
||||||
}: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
|
}: EchartsMixedTimeseriesFormData = { ...DEFAULT_FORM_DATA, ...formData };
|
||||||
|
|
||||||
const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
|
const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
|
||||||
@ -185,7 +188,28 @@ export default function transformProps(
|
|||||||
rawSeriesB.forEach(seriesOption =>
|
rawSeriesB.forEach(seriesOption =>
|
||||||
mapSeriesIdToAxis(seriesOption, yAxisIndexB),
|
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 => {
|
rawSeriesA.forEach(entry => {
|
||||||
const transformedSeries = transformSeries(entry, colorScale, {
|
const transformedSeries = transformSeries(entry, colorScale, {
|
||||||
area,
|
area,
|
||||||
@ -200,6 +224,10 @@ export default function transformProps(
|
|||||||
seriesKey: entry.name,
|
seriesKey: entry.name,
|
||||||
sliceId,
|
sliceId,
|
||||||
queryIndex: 0,
|
queryIndex: 0,
|
||||||
|
formatter,
|
||||||
|
showValueIndexes: showValueIndexesA,
|
||||||
|
totalStackedValues,
|
||||||
|
thresholdValues,
|
||||||
});
|
});
|
||||||
if (transformedSeries) series.push(transformedSeries);
|
if (transformedSeries) series.push(transformedSeries);
|
||||||
});
|
});
|
||||||
@ -220,6 +248,10 @@ export default function transformProps(
|
|||||||
: entry.name,
|
: entry.name,
|
||||||
sliceId,
|
sliceId,
|
||||||
queryIndex: 1,
|
queryIndex: 1,
|
||||||
|
formatter: formatterSecondary,
|
||||||
|
showValueIndexes: showValueIndexesB,
|
||||||
|
totalStackedValues: totalStackedValuesB,
|
||||||
|
thresholdValues: thresholdValuesB,
|
||||||
});
|
});
|
||||||
if (transformedSeries) series.push(transformedSeries);
|
if (transformedSeries) series.push(transformedSeries);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user