Canvas: add new element to represent a battery

<!-- Please only use this template for submitting feature requests --> **Why is this needed**: A battery icon / graphic element whose levels correspond to a metric value would be a valuable addition to the Canvas panel. **What would you like to be added**: A battery whose level is tied to a metric **Who is this feature for?** Many diverse industries use batteries giving this element wide appeal. Here is the .tsx following [Grafana's Canvas Element contribution guidelines](https://github.com/grafana/grafana/pull/107283/commits/df33f9b29284057b6e44c73b5212ffeaa9910ef7): ``` import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; import { useStyles2 } from '@grafana/ui'; import { CanvasElementItem, CanvasElementOptions, CanvasElementProps, DimensionContext, addSliderInput, ColorDimensionEditor, TextDimensionMode, } from '@grafana/canvas'; // --- Interfaces --- /** * Defines the configuration properties for the Battery element. */ interface BatteryConfig { level: { mode: TextDimensionMode.Fixed; fixed: number }; // Battery level (0-10) redColor: { fixed: string }; // Color for low battery (0-3) yellowColor: { fixed: string }; // Color for medium battery (4-7) greenColor: { fixed: string }; // Color for high battery (8-10) } /** * Defines the data properties passed to the BatteryDisplay component after processing. */ interface BatteryData { level: number; // Processed battery level fillColor: string; // Determined color of the battery fill } // --- Display Component --- /** * React component to display the battery level indicator. */ const BatteryDisplay = ({ data }: CanvasElementProps<BatteryConfig, BatteryData>) => { const styles = useStyles2(getStyles); if (!data) { return null; // Render nothing or a placeholder if no data is available } const { level, fillColor } = data; // Calculate fill height based on level (0-10 scale), mapping to 0-100% of the fill area const fillPercentage = (level / 10…