This is an automated email from the ASF dual-hosted git repository. vogievetsky pushed a commit to branch explore_source in repository https://gitbox.apache.org/repos/asf/druid.git
commit 4c6da9315be6a37da4cf5606196fc6af372ff025 Author: Vadim Ogievetsky <[email protected]> AuthorDate: Tue Aug 13 14:51:28 2024 -0700 goodies --- web-console/src/modules/bar-chart-module.tsx | 78 ++++++++++++++-------------- web-console/src/modules/module-pane.scss | 4 ++ 2 files changed, 44 insertions(+), 38 deletions(-) diff --git a/web-console/src/modules/bar-chart-module.tsx b/web-console/src/modules/bar-chart-module.tsx index ef6bcb7419b..47e00f36e06 100644 --- a/web-console/src/modules/bar-chart-module.tsx +++ b/web-console/src/modules/bar-chart-module.tsx @@ -34,7 +34,7 @@ const OVERALL_LABEL = 'Overall'; interface RecordTableParameterValues { splitColumn: ExpressionMeta; metric: ExpressionMeta; - metricToSort: ExpressionMeta; + measureToSort: ExpressionMeta; limit: number; } @@ -60,10 +60,10 @@ ModuleRepository.registerModule<RecordTableParameterValues>({ required: true, }, }, - metricToSort: { + measureToSort: { type: 'aggregate', control: { - label: 'Metric to sort (default to shown)', + label: 'Measure to sort (default to shown)', }, }, limit: { @@ -79,7 +79,7 @@ ModuleRepository.registerModule<RecordTableParameterValues>({ const { querySource, where, setWhere, parameterValues, stage, runSqlQuery } = props; const chartRef = useRef<ECharts>(); - const { splitColumn, metric, metricToSort, limit } = parameterValues; + const { splitColumn, metric, measureToSort, limit } = parameterValues; const dataQuery = useMemo(() => { const source = querySource.query; @@ -89,14 +89,14 @@ ModuleRepository.registerModule<RecordTableParameterValues>({ .addWhere(where) .addSelect(splitExpression.as('dim'), { addToGroupBy: 'end' }) .addSelect(metric.expression.as('met'), { - addToOrderBy: metricToSort ? undefined : 'end', + addToOrderBy: measureToSort ? undefined : 'end', direction: 'DESC', }) - .applyIf(metricToSort, q => - q.addOrderBy(metricToSort.expression.toOrderByExpression('DESC')), + .applyIf(measureToSort, q => + q.addOrderBy(measureToSort.expression.toOrderByExpression('DESC')), ) .changeLimitValue(limit); - }, [querySource, where, splitColumn, metric, metricToSort, limit]); + }, [querySource, where, splitColumn, metric, measureToSort, limit]); const [dataState] = useQueryManager({ query: dataQuery, @@ -105,6 +105,35 @@ ModuleRepository.registerModule<RecordTableParameterValues>({ }, }); + function setupChart(container: HTMLDivElement) { + const myChart = echarts.init(container, 'dark'); + + myChart.setOption({ + tooltip: {}, + dataset: { + sourceHeader: false, + dimensions: ['dim', 'met'], + source: [], + }, + xAxis: { + type: 'category', + axisLabel: { interval: 0, rotate: -30 }, + }, + yAxis: {}, + series: [ + { + type: 'bar', + encode: { + x: 'dim', + y: 'met', + }, + }, + ], + }); + + return myChart; + } + useEffect(() => { const myChart = chartRef.current; const data = dataState.data; @@ -158,38 +187,11 @@ ModuleRepository.registerModule<RecordTableParameterValues>({ return ( <div - className="bar-chart-module" + className="bar-chart-module module" ref={container => { - if (chartRef.current) return; - - const myChart = echarts.init(container, 'dark'); - - myChart.setOption({ - tooltip: {}, - dataset: { - sourceHeader: false, - dimensions: ['dim', 'met'], - source: [], - }, - xAxis: { - type: 'category', - axisLabel: { interval: 0, rotate: -30 }, - }, - yAxis: {}, - series: [ - { - type: 'bar', - encode: { - x: 'dim', - y: 'met', - }, - }, - ], - }); - - chartRef.current = myChart; + if (chartRef.current || !container) return; + chartRef.current = setupChart(container); }} - style={{ height: '100%' }} /> ); }, diff --git a/web-console/src/modules/module-pane.scss b/web-console/src/modules/module-pane.scss index a7ef0d8da76..c926f6efa9b 100644 --- a/web-console/src/modules/module-pane.scss +++ b/web-console/src/modules/module-pane.scss @@ -22,6 +22,10 @@ position: relative; @include card-like; + & > .module { + height: 100%; + } + .edit-button { position: absolute; top: 1px; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
