diff --git a/src/App.tsx b/src/App.tsx index 976f166..71c777c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -194,6 +194,10 @@ function App() { const dataUrl = await captureElementPng(node, { pixelRatio: 2, backgroundColor: bg.trim() || '#fff', paddingPx: 12 }) downloadDataUrlPng(dataUrl, `plot-${Date.now()}.png`) }} + onClearChart={() => { + // Reset the store with current capacity, viewport size and series names + store.reset(store.getCapacity(), store.getViewPortSize(), store.getSeries().map(x=>x.name)) + }} /> diff --git a/src/components/PlotToolsOverlay.tsx b/src/components/PlotToolsOverlay.tsx index 4157135..701e4a3 100644 --- a/src/components/PlotToolsOverlay.tsx +++ b/src/components/PlotToolsOverlay.tsx @@ -1,7 +1,7 @@ import { forwardRef, useState, useRef, useEffect } from 'react' import Button from './ui/Button' import Tooltip from './ui/Tooltip' -import { PlayIcon, PauseIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, CameraIcon, ArrowDownTrayIcon, CogIcon } from '@heroicons/react/24/outline' +import { PlayIcon, PauseIcon, MagnifyingGlassPlusIcon, MagnifyingGlassMinusIcon, CameraIcon, ArrowDownTrayIcon, CogIcon, TrashIcon } from '@heroicons/react/24/outline' import type { ChartExportOptions } from '../utils/chartExport' interface Props { @@ -12,10 +12,11 @@ interface Props { onSavePng: () => Promise | void onExportCsv: (options: ChartExportOptions) => void onShowSettings: () => void + onClearChart: () => void hasData: boolean } -const PlotToolsOverlay = forwardRef(function PlotToolsOverlay({ frozen, onToggleFrozen, onZoomIn, onZoomOut, onSavePng, onExportCsv, onShowSettings, hasData }, ref) { +const PlotToolsOverlay = forwardRef(function PlotToolsOverlay({ frozen, onToggleFrozen, onZoomIn, onZoomOut, onSavePng, onExportCsv, onShowSettings, onClearChart, hasData }, ref) { const [showExportMenu, setShowExportMenu] = useState(false) const exportMenuRef = useRef(null) @@ -120,6 +121,12 @@ const PlotToolsOverlay = forwardRef(function PlotToolsOve + + + +