react-native-metrify 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/widgets/GroupedBarChart/GroupedBarChart.tsx

@@ -1,190 +0,0 @@
-/**
- * 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

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

package/src/widgets/GroupedBarChart/types.ts

@@ -1,30 +0,0 @@
-/**
- * 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

@@ -1,216 +0,0 @@
-/**
- * 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

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

package/src/widgets/Heatmap/types.ts

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,173 +0,0 @@
-/**
- * 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

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

package/src/widgets/Histogram/types.ts

@@ -1,18 +0,0 @@
-/**
- * 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;
-}