Me
which parts of the code should i explore to learn how to make a new echarts widget, say a slider, available as an HCL component that runs SQL and feeds data into the echarts slider?
Cody
Read 13 files To add a new ECharts widget (like a slider) as an HCL component that runs SQL, you should explore the following parts of the code:
ui/dashboard/src/components/dashboards/charts/echarts.ts - This file registers all the ECharts chart types that Steampipe supports. You'll need to import the ECharts slider component here and add it to the echarts.use() call.
ui/dashboard/src/components/dashboards/charts/index.ts - This file maps chart types to component classes. You'll need to add an entry here to map the "slider" chart type to your new slider component class.
ui/dashboard/src/components/dashboards/charts/Chart/index.tsx - This is the base Chart component that all chart types extend. Your new slider component will extend this base class.
ui/dashboard/src/components/dashboards/charts/SliderChart/index.tsx - This is where you'll define your new SliderChart component. It should:
Extend the Chart base class Call useChartData() to run a SQL query and get the data Build ECharts options for the slider based on the data Render an ECharts chart using ReactEChartsCore and the options ui/dashboard/src/components/dashboards/charts/types.ts - Add your new "slider" chart type to the ChartType enum.
Update the Chart schema in ui/dashboard/spec.md to allow the "slider" chart type and any new properties you add.
Add stories for your new SliderChart component in ui/dashboard/src/components/dashboards/charts/SliderChart/index.stories.js.
Add tests for the SliderChart in ui/dashboard/src/components/dashboards/charts/SliderChart/index.test.tsx.