Undo / redo

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import history from 'west-coast-charts/features/history'

WestCoastCharts.use(types).use(history)

const options = {
  chart: {
    height: 360,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "line",
    zoom: {
      enabled: true
    },
    history: {
      enabled: true,
      wcc: {
        toolbar: true,
        recordData: true
      }
    },
    events: {
      wccHistoryChange: () => upd()
    }
  },
  series: [
    {
      name: "Web",
      data: [
        [1767571200000, 61.5],
        [1768176000000, 60.9],
        [1768780800000, 59.4],
        [1769385600000, 60.6],
        [1769990400000, 58.4],
        [1770595200000, 56.5],
        [1771200000000, 57.5],
        [1771804800000, 57.4],
        [1772409600000, 56.3],
        [1773014400000, 54.2],
        [1773619200000, 56.5],
        [1774224000000, 58.4],
        [1774828800000, 57.4],
        [1775433600000, 58.8],
        [1776038400000, 60.3],
        [1776643200000, 60.8],
        [1777248000000, 58.6],
        [1777852800000, 58.8],
        [1778457600000, 60.2],
        [1779062400000, 60.3],
        [1779667200000, 59.8],
        [1780272000000, 60.2],
        [1780876800000, 59.3],
        [1781481600000, 60],
        [1782086400000, 60.3],
        [1782691200000, 61.9],
        [1783296000000, 63.6],
        [1783900800000, 65.1],
        [1784505600000, 65.2],
        [1785110400000, 66.7],
        [1785715200000, 64.8],
        [1786320000000, 66.6],
        [1786924800000, 68],
        [1787529600000, 69.8],
        [1788134400000, 70.1],
        [1788739200000, 67.8],
        [1789344000000, 67.3],
        [1789948800000, 67.9],
        [1790553600000, 65.5],
        [1791158400000, 63.8]
      ]
    },
    {
      name: "App",
      data: [
        [1767571200000, 81.5],
        [1768176000000, 83.4],
        [1768780800000, 81.6],
        [1769385600000, 83.1],
        [1769990400000, 82.1],
        [1770595200000, 80.3],
        [1771200000000, 78.8],
        [1771804800000, 78.1],
        [1772409600000, 76.4],
        [1773014400000, 75.9],
        [1773619200000, 76.7],
        [1774224000000, 75.5],
        [1774828800000, 74.6],
        [1775433600000, 74],
        [1776038400000, 76.6],
        [1776643200000, 74.6],
        [1777248000000, 76.2],
        [1777852800000, 75.1],
        [1778457600000, 76.6],
        [1779062400000, 78.7],
        [1779667200000, 78.5],
        [1780272000000, 77.9],
        [1780876800000, 75.9],
        [1781481600000, 75.6],
        [1782086400000, 76.1],
        [1782691200000, 78.2],
        [1783296000000, 76.2],
        [1783900800000, 78.4],
        [1784505600000, 80.9],
        [1785110400000, 80.8],
        [1785715200000, 78.5],
        [1786320000000, 80.5],
        [1786924800000, 81.6],
        [1787529600000, 80.7],
        [1788134400000, 78.4],
        [1788739200000, 80.3],
        [1789344000000, 81.8],
        [1789948800000, 79.8],
        [1790553600000, 81.4],
        [1791158400000, 79.5]
      ]
    },
    {
      name: "Retail",
      data: [
        [1767571200000, 100.9],
        [1768176000000, 103],
        [1768780800000, 103.7],
        [1769385600000, 103.6],
        [1769990400000, 105.5],
        [1770595200000, 107.5],
        [1771200000000, 108.1],
        [1771804800000, 107.7],
        [1772409600000, 108.2],
        [1773014400000, 110.4],
        [1773619200000, 108.1],
        [1774224000000, 109.6],
        [1774828800000, 107.5],
        [1775433600000, 106],
        [1776038400000, 103.9],
        [1776643200000, 102.9],
        [1777248000000, 105.3],
        [1777852800000, 103.7],
        [1778457600000, 103.2],
        [1779062400000, 104.8],
        [1779667200000, 103.7],
        [1780272000000, 104.7],
        [1780876800000, 102.6],
        [1781481600000, 101.1],
        [1782086400000, 101],
        [1782691200000, 103.5],
        [1783296000000, 102.1],
        [1783900800000, 104.4],
        [1784505600000, 102.7],
        [1785110400000, 103.9],
        [1785715200000, 101.9],
        [1786320000000, 102.3],
        [1786924800000, 104.3],
        [1787529600000, 106.2],
        [1788134400000, 107.4],
        [1788739200000, 109],
        [1789344000000, 107.6],
        [1789948800000, 110.1],
        [1790553600000, 112.1],
        [1791158400000, 110.8]
      ]
    }
  ],
  xaxis: {
    type: "datetime"
  },
  stroke: {
    width: 2
  },
  title: {
    text: "Weekly orders"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()