Skip to content

Instantly share code, notes, and snippets.

@judell
Created May 27, 2023 19:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save judell/19b96b05759a66fd4ff4c7d47763d96e to your computer and use it in GitHub Desktop.
Save judell/19b96b05759a66fd4ff4c7d47763d96e to your computer and use it in GitHub Desktop.
cody-steampipe-04

Me: paste context from https://jreyesr.github.io/posts/steampipe-part-int-pi-mods/

Me

given this context, how would i add a slider widget?

Cody Adding a slider widget to Steampipe dashboards would be a useful feature. Here is how I would approach implementing it:

Define the slider widget in the Steampipe dashboard DSL. It could look something like this: slider "time_range" { title = "Time Range" min = "2020-01-01" max = "2020-12-31" step = "1 month" } This would define a slider with a range from January 1, 2020 to December 31, 2020, stepping by 1 month increments.

Add support for the slider widget in the Steampipe UI code. This would involve: Adding a Slider component that renders an Ant Design Slider The Slider component would need to parse the min, max, and step values from the dashboard DSL and pass appropriate props to the Ant Design Slider It would also need to handle updating the value and passing that back to the dashboard runtime Add support for the slider widget in the Steampipe dashboard runtime. This would involve: Parsing the slider widget definition from the DSL Storing the slider's current value in the dashboard state Exposing an API to get and update the slider's value Passing the slider value as an argument to any queries or other widgets that reference it Allow other widgets to reference the slider value as an argument. For example: chart "transactions" { query = query.transactions args = { time_range = self.slider.time_range.value } } This would pass the current value of the time_range slider as an argument named time_range to the transactions query.

In the queries, use the passed time_range argument to filter data. For example: select * from transactions where date between $1 and $2 Then when this query is executed, $1 and $2 would be replaced with the start and end dates from the time_range slider value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment