react-native-metrify 0.1.0-alpha.1

package/src/widgets/GroupedBarChart/GroupedBarChart.tsx

@@ -0,0 +1,190 @@
+/**
+ * GroupedBarChart Widget - Multiple bars side by side
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
+import { Text } from '../../renderer-svg/primitives';
+import { GroupedBarChartWidgetProps } from './types';
+
+export const GroupedBarChart = memo<GroupedBarChartWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  barWidth = 20,
+  groupSpacing = 32,
+  barSpacing = 4,
+  showValues = false,
+  showLabels = true,
+  showLegend = true,
+  maxGroups = 10,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 350, 250);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-loading`}>
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>Loading...</RNText>
+      </View>
+    );
+  }
+
+  if (!widgetData || !widgetData.data || widgetData.data.length === 0) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-empty`}>
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>No data</RNText>
+      </View>
+    );
+  }
+
+  const { data, title } = widgetData;
+  const displayData = data.slice(0, maxGroups);
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const legendHeight = showLegend ? 40 : 0;
+  const labelHeight = showLabels ? theme.fontScale.sm + theme.spacing.xs : 0;
+
+  const chartHeight = dimensions.height - padding * 2 - titleHeight - legendHeight - labelHeight;
+  const chartWidth = dimensions.width - padding * 2;
+
+  const maxValue = useMemo(() => {
+    return Math.max(...displayData.flatMap(group => group.values.map(v => v.value)));
+  }, [displayData]);
+
+  // Get all unique value labels for legend
+  const allValueLabels = useMemo(() => {
+    const labels = new Map<string, string>();
+    displayData.forEach(group => {
+      group.values.forEach(val => {
+        labels.set(val.label, val.color);
+      });
+    });
+    return Array.from(labels.entries()).map(([label, color]) => ({ label, color }));
+  }, [displayData]);
+
+  const groups = useMemo(() => {
+    return displayData.map((group, groupIndex) => {
+      const barsInGroup = group.values.length;
+      const groupWidth = barsInGroup * barWidth + (barsInGroup - 1) * barSpacing;
+      const groupX = groupIndex * (groupWidth + groupSpacing);
+
+      const bars = group.values.map((val, barIndex) => {
+        const barX = groupX + barIndex * (barWidth + barSpacing);
+        const normalizedValue = normalize(val.value, 0, maxValue);
+        const barHeight = normalizedValue * chartHeight;
+        const barY = chartHeight - barHeight;
+
+        return {
+          x: barX,
+          y: barY,
+          width: barWidth,
+          height: barHeight,
+          color: val.color,
+          value: val.value,
+          label: val.label,
+        };
+      });
+
+      return {
+        groupLabel: group.groupLabel,
+        bars,
+        groupX,
+        groupWidth,
+      };
+    });
+  }, [displayData, barWidth, barSpacing, groupSpacing, chartHeight, maxValue]);
+
+  return (
+    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
+      {title && (
+        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
+          {title}
+        </RNText>
+      )}
+
+      <View style={styles.chartContainer}>
+        <Svg width={chartWidth} height={chartHeight + (showValues ? 20 : 0)}>
+          {groups.map((group, groupIndex) => (
+            group.bars.map((bar, barIndex) => (
+              <React.Fragment key={`group-${groupIndex}-bar-${barIndex}`}>
+                <Rect
+                  x={bar.x}
+                  y={bar.y}
+                  width={bar.width}
+                  height={bar.height}
+                  fill={bar.color}
+                  rx={theme.radius.sm}
+                  ry={theme.radius.sm}
+                />
+                {showValues && (
+                  <Text
+                    x={bar.x + bar.width / 2}
+                    y={bar.y - 4}
+                    text={bar.value.toString()}
+                    fontSize={theme.fontScale.xs}
+                    fill={theme.colors.textSecondary}
+                    textAnchor="middle"
+                  />
+                )}
+              </React.Fragment>
+            ))
+          ))}
+        </Svg>
+
+        {showLabels && (
+          <View style={styles.labelsContainer}>
+            {groups.map((group, index) => (
+              <View
+                key={`label-${index}`}
+                style={[styles.labelItem, { left: group.groupX + group.groupWidth / 2 - 30, width: 60 }]}
+              >
+                <RNText
+                  style={[styles.labelText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}
+                  numberOfLines={1}
+                >
+                  {group.groupLabel}
+                </RNText>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {showLegend && (
+        <View style={styles.legend}>
+          {allValueLabels.map((item, index) => (
+            <View key={`legend-${index}`} style={styles.legendItem}>
+              <View style={[styles.legendColor, { backgroundColor: item.color }]} />
+              <RNText style={[styles.legendText, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs }]}>
+                {item.label}
+              </RNText>
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+});
+
+GroupedBarChart.displayName = 'GroupedBarChart';
+
+const styles = StyleSheet.create({
+  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  container: { justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 16 },
+  emptyText: { fontSize: 16 },
+  title: { textAlign: 'center', width: '100%' },
+  chartContainer: { flex: 1, width: '100%' },
+  labelsContainer: { position: 'relative', height: 30, marginTop: 4 },
+  labelItem: { position: 'absolute', alignItems: 'center' },
+  labelText: { textAlign: 'center' },
+  legend: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12, gap: 12 },
+  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  legendColor: { width: 12, height: 12, borderRadius: 2 },
+  legendText: { textTransform: 'uppercase', letterSpacing: 0.5 },
+});

package/src/widgets/GroupedBarChart/index.ts

@@ -0,0 +1,2 @@
+export { GroupedBarChart } from './GroupedBarChart';
+export type { GroupedBarChartWidgetProps, GroupedBarChartData, GroupedBarDataPoint, GroupedBarValue } from './types';

package/src/widgets/GroupedBarChart/types.ts

@@ -0,0 +1,30 @@
+/**
+ * GroupedBarChart Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface GroupedBarValue {
+  value: number;
+  color: string;
+  label: string;
+}
+
+export interface GroupedBarDataPoint {
+  groupLabel: string;
+  values: GroupedBarValue[];
+}
+
+export interface GroupedBarChartData {
+  data: GroupedBarDataPoint[];
+  title?: string;
+}
+
+export interface GroupedBarChartWidgetProps extends BaseWidgetProps<GroupedBarChartData> {
+  barWidth?: number;
+  groupSpacing?: number;
+  barSpacing?: number;
+  showValues?: boolean;
+  showLabels?: boolean;
+  showLegend?: boolean;
+  maxGroups?: number;
+}

package/src/widgets/Heatmap/Heatmap.tsx

@@ -0,0 +1,216 @@
+/**
+ * Heatmap Widget - Grid of colored cells
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
+import { Text } from '../../renderer-svg/primitives';
+import { HeatmapWidgetProps } from './types';
+
+export const Heatmap = memo<HeatmapWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  cellSize = 30,
+  cellSpacing = 2,
+  showValues = false,
+  showLabels = true,
+  colorScheme = 'blue',
+  minColor,
+  maxColor,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 400, 300);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-loading`}>
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>Loading...</RNText>
+      </View>
+    );
+  }
+
+  if (!widgetData || !widgetData.data || widgetData.data.length === 0) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-empty`}>
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>No data</RNText>
+      </View>
+    );
+  }
+
+  const { data, xLabels, yLabels, title } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const yLabelWidth = showLabels ? 60 : 0;
+  const xLabelHeight = showLabels ? 30 : 0;
+
+  // Get min/max values for color scaling
+  const { minValue, maxValue } = useMemo(() => {
+    const values = data.map(d => d.value);
+    return {
+      minValue: Math.min(...values),
+      maxValue: Math.max(...values),
+    };
+  }, [data]);
+
+  // Color scheme mapping
+  const getColorForValue = (value: number): string => {
+    const normalizedValue = normalize(value, minValue, maxValue);
+    
+    if (minColor && maxColor) {
+      // Custom colors - simple interpolation
+      return interpolateColor(minColor, maxColor, normalizedValue);
+    }
+
+    // Predefined color schemes
+    switch (colorScheme) {
+      case 'blue':
+        return `rgba(59, 130, 246, ${0.2 + normalizedValue * 0.8})`;
+      case 'green':
+        return `rgba(16, 185, 129, ${0.2 + normalizedValue * 0.8})`;
+      case 'red':
+        return `rgba(239, 68, 68, ${0.2 + normalizedValue * 0.8})`;
+      case 'purple':
+        return `rgba(139, 92, 246, ${0.2 + normalizedValue * 0.8})`;
+      case 'gradient':
+        if (normalizedValue < 0.5) {
+          return `rgba(59, 130, 246, ${0.2 + normalizedValue * 1.6})`;
+        } else {
+          return `rgba(239, 68, 68, ${(normalizedValue - 0.5) * 2 * 0.8 + 0.2})`;
+        }
+      default:
+        return `rgba(59, 130, 246, ${0.2 + normalizedValue * 0.8})`;
+    }
+  };
+
+  // Create grid cells
+  const cells = useMemo(() => {
+    return data.map(point => {
+      const xIndex = typeof point.x === 'number' ? point.x : xLabels.indexOf(point.x as string);
+      const yIndex = typeof point.y === 'number' ? point.y : yLabels.indexOf(point.y as string);
+      
+      const x = xIndex * (cellSize + cellSpacing);
+      const y = yIndex * (cellSize + cellSpacing);
+      
+      return {
+        x,
+        y,
+        width: cellSize,
+        height: cellSize,
+        color: getColorForValue(point.value),
+        value: point.value,
+        xIndex,
+        yIndex,
+      };
+    });
+  }, [data, xLabels, yLabels, cellSize, cellSpacing, minValue, maxValue, colorScheme]);
+
+  const chartWidth = xLabels.length * (cellSize + cellSpacing);
+  const chartHeight = yLabels.length * (cellSize + cellSpacing);
+
+  return (
+    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
+      {title && (
+        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
+          {title}
+        </RNText>
+      )}
+
+      <View style={styles.chartRow}>
+        {showLabels && (
+          <View style={[styles.yLabels, { width: yLabelWidth, height: chartHeight }]}>
+            {yLabels.map((label, index) => (
+              <RNText
+                key={`y-${index}`}
+                style={[
+                  styles.yLabel,
+                  {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.fontScale.xs,
+                    top: index * (cellSize + cellSpacing) + cellSize / 2 - 6,
+                  },
+                ]}
+              >
+                {label}
+              </RNText>
+            ))}
+          </View>
+        )}
+
+        <View>
+          <Svg width={chartWidth} height={chartHeight}>
+            {cells.map((cell, index) => (
+              <React.Fragment key={`cell-${index}`}>
+                <Rect
+                  x={cell.x}
+                  y={cell.y}
+                  width={cell.width}
+                  height={cell.height}
+                  fill={cell.color}
+                  rx={theme.radius.sm}
+                  ry={theme.radius.sm}
+                />
+                {showValues && (
+                  <Text
+                    x={cell.x + cell.width / 2}
+                    y={cell.y + cell.height / 2}
+                    text={cell.value.toFixed(0)}
+                    fontSize={theme.fontScale.xs}
+                    fill={theme.colors.text}
+                    textAnchor="middle"
+                  />
+                )}
+              </React.Fragment>
+            ))}
+          </Svg>
+
+          {showLabels && (
+            <View style={[styles.xLabels, { width: chartWidth }]}>
+              {xLabels.map((label, index) => (
+                <RNText
+                  key={`x-${index}`}
+                  style={[
+                    styles.xLabel,
+                    {
+                      color: theme.colors.textSecondary,
+                      fontSize: theme.fontScale.xs,
+                      left: index * (cellSize + cellSpacing),
+                      width: cellSize,
+                    },
+                  ]}
+                >
+                  {label}
+                </RNText>
+              ))}
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+});
+
+Heatmap.displayName = 'Heatmap';
+
+// Simple color interpolation helper
+function interpolateColor(color1: string, color2: string, factor: number): string {
+  // Simple implementation - just use opacity for now
+  return `${color2.substring(0, 7)}${Math.round((0.2 + factor * 0.8) * 255).toString(16)}`;
+}
+
+const styles = StyleSheet.create({
+  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  container: { justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 16 },
+  emptyText: { fontSize: 16 },
+  title: { textAlign: 'center', width: '100%' },
+  chartRow: { flexDirection: 'row' },
+  yLabels: { position: 'relative', marginRight: 8 },
+  yLabel: { position: 'absolute', right: 0, textAlign: 'right' },
+  xLabels: { position: 'relative', height: 30, marginTop: 4 },
+  xLabel: { position: 'absolute', textAlign: 'center' },
+});

package/src/widgets/Heatmap/index.ts

@@ -0,0 +1,2 @@
+export { Heatmap } from './Heatmap';
+export type { HeatmapWidgetProps, HeatmapData, HeatmapDataPoint } from './types';

package/src/widgets/Heatmap/types.ts

@@ -0,0 +1,27 @@
+/**
+ * Heatmap Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface HeatmapDataPoint {
+  x: number | string;
+  y: number | string;
+  value: number;
+}
+
+export interface HeatmapData {
+  data: HeatmapDataPoint[];
+  xLabels: string[];
+  yLabels: string[];
+  title?: string;
+}
+
+export interface HeatmapWidgetProps extends BaseWidgetProps<HeatmapData> {
+  cellSize?: number;
+  cellSpacing?: number;
+  showValues?: boolean;
+  showLabels?: boolean;
+  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'gradient';
+  minColor?: string;
+  maxColor?: string;
+}

package/src/widgets/Histogram/Histogram.tsx

@@ -0,0 +1,173 @@
+/**
+ * Histogram Widget - Frequency distribution
+ */
+import React, { memo, useMemo } from 'react';
+import { View, Text as RNText, StyleSheet } from 'react-native';
+import Svg, { Rect, Line as SvgLine } from 'react-native-svg';
+import { useWidgetDimensions, useWidgetTheme, normalize } from '../../core';
+import { HistogramWidgetProps } from './types';
+
+export const Histogram = memo<HistogramWidgetProps>(({
+  data: widgetData,
+  width,
+  height,
+  loading = false,
+  theme: themeOverride,
+  showXAxis = true,
+  showYAxis = true,
+  showGrid = false,
+  color,
+  barSpacing = 2,
+  testID,
+}) => {
+  const theme = useWidgetTheme(themeOverride);
+  const dimensions = useWidgetDimensions(width, height, 350, 250);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-loading`}>
+        <RNText style={[styles.loadingText, { color: theme.colors.textSecondary }]}>Loading...</RNText>
+      </View>
+    );
+  }
+
+  if (!widgetData || !widgetData.data || widgetData.data.length === 0) {
+    return (
+      <View style={[styles.container, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md }]} testID={`${testID}-empty`}>
+        <RNText style={[styles.emptyText, { color: theme.colors.textSecondary }]}>No data</RNText>
+      </View>
+    );
+  }
+
+  const { data, title, binCount = 10 } = widgetData;
+  const padding = theme.spacing.md;
+  const titleHeight = title ? theme.fontScale.md + theme.spacing.sm : 0;
+  const xAxisHeight = showXAxis ? 30 : 0;
+  const yAxisWidth = showYAxis ? 40 : 0;
+
+  const chartWidth = dimensions.width - padding * 2 - yAxisWidth;
+  const chartHeight = dimensions.height - padding * 2 - titleHeight - xAxisHeight;
+
+  const barColor = color || theme.colors.chartPrimary;
+
+  // Calculate bins
+  const { bins, maxFrequency, minValue, maxValue } = useMemo(() => {
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const binWidth = (max - min) / binCount;
+    
+    const binArray: { start: number; end: number; count: number }[] = [];
+    
+    for (let i = 0; i < binCount; i++) {
+      const start = min + i * binWidth;
+      const end = start + binWidth;
+      const count = data.filter(val => val >= start && (i === binCount - 1 ? val <= end : val < end)).length;
+      binArray.push({ start, end, count });
+    }
+
+    const maxFreq = Math.max(...binArray.map(b => b.count));
+    
+    return {
+      bins: binArray,
+      maxFrequency: maxFreq,
+      minValue: min,
+      maxValue: max,
+    };
+  }, [data, binCount]);
+
+  const yAxisLabels = useMemo(() => {
+    const step = Math.ceil(maxFrequency / 4);
+    return Array.from({ length: 5 }, (_, i) => ({
+      value: i * step,
+      y: chartHeight - (i * chartHeight) / 4,
+    }));
+  }, [maxFrequency, chartHeight]);
+
+  const barWidth = (chartWidth - (bins.length - 1) * barSpacing) / bins.length;
+
+  const bars = useMemo(() => {
+    return bins.map((bin, index) => {
+      const barHeight = (bin.count / maxFrequency) * chartHeight;
+      const barY = chartHeight - barHeight;
+      const barX = index * (barWidth + barSpacing);
+
+      return {
+        x: barX,
+        y: barY,
+        width: barWidth,
+        height: barHeight,
+        count: bin.count,
+        rangeLabel: `${bin.start.toFixed(0)}-${bin.end.toFixed(0)}`,
+      };
+    });
+  }, [bins, maxFrequency, chartHeight, barWidth, barSpacing]);
+
+  return (
+    <View style={[styles.wrapper, { width: dimensions.width, height: dimensions.height, backgroundColor: theme.colors.surface, borderRadius: theme.radius.md, padding }]} testID={testID}>
+      {title && (
+        <RNText style={[styles.title, { color: theme.colors.text, fontSize: theme.fontScale.md, fontWeight: 'bold', marginBottom: theme.spacing.sm }]}>
+          {title}
+        </RNText>
+      )}
+
+      <View style={styles.chartRow}>
+        {showYAxis && (
+          <View style={[styles.yAxis, { width: yAxisWidth }]}>
+            {yAxisLabels.map((label, index) => (
+              <RNText key={`y-${index}`} style={[styles.yAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, top: label.y - 6 }]}>
+                {label.value}
+              </RNText>
+            ))}
+          </View>
+        )}
+
+        <View>
+          <Svg width={chartWidth} height={chartHeight}>
+            {showGrid && yAxisLabels.map((label, index) => (
+              <SvgLine key={`grid-${index}`} x1={0} y1={label.y} x2={chartWidth} y2={label.y} stroke={theme.colors.borderLight} strokeWidth={1} />
+            ))}
+
+            {bars.map((bar, index) => (
+              <Rect
+                key={`bar-${index}`}
+                x={bar.x}
+                y={bar.y}
+                width={bar.width}
+                height={bar.height}
+                fill={barColor}
+                rx={theme.radius.sm}
+                ry={theme.radius.sm}
+              />
+            ))}
+          </Svg>
+
+          {showXAxis && (
+            <View style={[styles.xAxis, { width: chartWidth }]}>
+              <RNText style={[styles.xAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, left: 0 }]}>
+                {minValue.toFixed(0)}
+              </RNText>
+              <RNText style={[styles.xAxisLabel, { color: theme.colors.textSecondary, fontSize: theme.fontScale.xs, right: 0 }]}>
+                {maxValue.toFixed(0)}
+              </RNText>
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+});
+
+Histogram.displayName = 'Histogram';
+
+const styles = StyleSheet.create({
+  wrapper: { justifyContent: 'flex-start', alignItems: 'flex-start' },
+  container: { justifyContent: 'center', alignItems: 'center' },
+  loadingText: { fontSize: 16 },
+  emptyText: { fontSize: 16 },
+  title: { textAlign: 'center', width: '100%' },
+  chartRow: { flexDirection: 'row', alignItems: 'flex-start' },
+  yAxis: { position: 'relative', marginRight: 8 },
+  yAxisLabel: { position: 'absolute', right: 0, textAlign: 'right' },
+  xAxis: { position: 'relative', height: 30, marginTop: 4 },
+  xAxisLabel: { position: 'absolute' },
+});

package/src/widgets/Histogram/index.ts

@@ -0,0 +1,2 @@
+export { Histogram } from './Histogram';
+export type { HistogramWidgetProps, HistogramData } from './types';

package/src/widgets/Histogram/types.ts

@@ -0,0 +1,18 @@
+/**
+ * Histogram Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+
+export interface HistogramData {
+  data: number[];
+  title?: string;
+  binCount?: number;
+}
+
+export interface HistogramWidgetProps extends BaseWidgetProps<HistogramData> {
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  showGrid?: boolean;
+  color?: string;
+  barSpacing?: number;
+}