charting-blog-2

Charting.tsx

import { addPropertyControls, Color, ControlType, Frame } from "framer";
import * as React from "react";
import Chart from "react-apexcharts";

enum ChartTypes {
  Line = "line",
  Area = "area",
  Bar = "bar",
  Heatmap = "heatmap",
  Radar = "radar"
}

export interface Props {
  width?: number;
  height?: number;
  points: number;
  seriesCount: number;
  chartType: ChartTypes;
  showToolbar: boolean;
  showLegend: boolean;
  showXaxis: boolean;
  showYaxis: boolean;
  isStacked: boolean;
  isHorizontal: boolean;
  colors: string[];
  palette?: string;
  showStroke: boolean;
  stroke: number;
  strokeCurve: "smooth" | "straight" | "stepline";
  fillType: "solid" | "gradient" | "pattern";
  fillOpacity: number;
  onDataPointSelection?: () => void;
  onDataPointMouseEnter?: () => void;
  onDataPointMouseLeave?: () => void;
}

export const Charting = function(props) {
  return <h1>Charting</h1>;
};

Charting.defaultProps = {
  width: 800,
  height: 600,
  chartType: ChartTypes.Area,
  isHorizontal: false,
  points: 5,
  seriesCount: 1,
  fillType: "gradient",
  fillOpacity: 0.8,
  stroke: 5,
  showStroke: true,
  strokeCurve: "smooth",
  palette: "palette1",
  showToolbar: true,
  showLegend: true,
  showXaxis: true,
  showYaxis: false,
  isStacked: false,
  colors: []
} as Props;