GitHub user najeela-pa added a comment to the discussion: Changing Dashboard
'Big Number with Trendline chart' background color & adding additional suffix
to display value
I made changes to the
superset-frontend\plugins\plugin-chart-echarts\src\BigNumber\BigNumberWithTrendline\index.ts
file and shared the updated file below. However, after making these changes
for the background color update, I took the build, but it got stuck and
encountered the following error
.error:
/ Processing:
C:\Projects\dataset\superset\superset-frontend\packages\superset-ui-switchboard\src\switchboard.ts
25% building 1/8 entries 15000/15072 dependencies 1842/6383
modules`isModuleDeclaration` has been deprecated, please migrate to
`isImportOrExportDeclaration`
at isModuleDeclaration
(C:\Projects\dataset\superset\superset-frontend\node_modules\@babel\types\lib\validators\generated\index.js:2748:35)
/ Processing:
C:\Projects\dataset\superset\superset-frontend\src\visualizations\TimeTable\transformProps.ts
index.ts
/**
* 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 { t, Behavior } from '@superset-ui/core';
import controlPanel from './controlPanel';
import transformProps from './transformProps';
import buildQuery from './buildQuery';
import example from './images/Big_Number_Trendline.jpg';
import thumbnail from './images/thumbnail.png';
import {
BigNumberWithTrendlineChartProps,
BigNumberWithTrendlineFormData,
} from '../types';
import { EchartsChartPlugin } from '../../types';
const metadata = {
category: t('KPI'),
description: t(
'Showcases a single number accompanied by a simple line chart, to call
attention to an important metric along with its change over time or other
dimension.',
),
exampleGallery: [{ url: example }],
name: t('Big Number with Trendline'),
tags: [
t('Advanced-Analytics'),
t('Line'),
t('Percentages'),
t('Featured'),
t('Report'),
t('Trend'),
],
thumbnail,
behaviors: [Behavior.DrillToDetail],
};
export default class BigNumberWithTrendlineChartPlugin extends
EchartsChartPlugin<
BigNumberWithTrendlineFormData,
BigNumberWithTrendlineChartProps
> {
constructor() {
super({
loadChart: () => import('../BigNumberViz'),
metadata,
buildQuery,
transformProps: (chartProps: BigNumberWithTrendlineChartProps) => {
const props = transformProps(chartProps);
// Add simple DOM manipulation after render
requestAnimationFrame(() => {
const updateColors = () => {
['705', '706', '707', '708'].forEach(id => {
const el = document.querySelector(`#chart-id-${id}`);
const value = document.querySelector(`#chart-id-${id}
.subheader-line`);
if (el && value) {
const num = parseFloat(value.textContent || '0');
el.setAttribute(
'style',
`background-color: ${
num >= 50 ? 'yellow' :
num >= 10 ? 'green' :
num >= 0 ? 'red' : '#FFEEEE'
}`
);
}
});
};
updateColors();
setInterval(updateColors, 5000);
});
return props;
},
controlPanel,
});
}
}
GitHub link:
https://github.com/apache/superset/discussions/32811#discussioncomment-12610243
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
