diff --git a/packages/opub-ui/src/components/Satori/Satori.stories.tsx b/packages/opub-ui/src/components/Satori/Satori.stories.tsx index 31a7a99a..deeaf4ac 100644 --- a/packages/opub-ui/src/components/Satori/Satori.stories.tsx +++ b/packages/opub-ui/src/components/Satori/Satori.stories.tsx @@ -1,12 +1,9 @@ import React from 'react'; import { Meta, StoryObj } from '@storybook/react'; -import { features } from '../../../assets/json/assam.json'; import { ShareDialog } from '../ShareDialog'; import Card from './Card'; -import { initChart } from './chart'; import { useScreenshot } from './hooks'; -import { initMap } from './map'; /** * An utility to generate and download reports. @@ -56,180 +53,3 @@ export const Default: Story = { ); }, }; - -export const Chart: Story = { - render: () => { - const ref = React.useRef(null); - const [chart, setChart] = React.useState(null); - - React.useEffect(() => { - if (ref.current === null) return; - const chart = initChart(ref.current); - setChart(chart); - }, []); - - const [dataURL, setDataURL] = React.useState(''); - const { domToUrl, downloadFile } = useScreenshot(); - - const handleOpen = async () => { - const SVG = ref.current?.querySelector('svg') as SVGElement; - - const dataImgURL = await domToUrl(SVG, { - width: 1760, - height: 600, - scale: 3, - backgroundColor: 'white', - }); - - setDataURL(dataImgURL); - }; - - return ( - <> -
- downloadFile(dataURL, 'Line Chart')} - className="mt-4" - > - Share - - - ); - }, -}; - -const mapDataFn = (value: number) => { - return value >= 330 - ? '#a50f15' - : value >= 325 - ? '#de2d26' - : value >= 320 - ? '#fb6a4a' - : value >= 315 - ? '#fc9272' - : value >= 310 - ? '#fcbba1' - : '#fee5d9'; -}; - -const mapProps = { - center: [26.193, 92.3], - zoom: 7.9, - zoomControl: false, - mapDataFn, - fillOpacity: 1, - color: 'black', - weight: 1, - features, - tile: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', - maxZoom: 19, - code: 'dt_code', -}; - -export const Map: Story = { - render: () => { - const ref = React.useRef(null); - const mRef = React.useRef(null); - - const [map, setMap] = React.useState(null); - const [isLoading, setIsLoading] = React.useState(false); - const [dataURL, setDataURL] = React.useState(''); - const { domToUrl, downloadFile, createSvg } = useScreenshot(); - - React.useEffect(() => { - if (mRef.current === null) return; - const { map: mapInit } = initMap(mRef.current, mapProps); - setMap(mapInit); - - return () => { - mapInit.remove(); - }; - }, []); - - async function generateImage(map?: any) { - setIsLoading(true); - - const targetElm = ref.current; - const dataImgURL = await domToUrl(targetElm as HTMLElement, { - width: map.getSize().x, - height: map.getSize().y, - backgroundColor: 'white', - }); - - setDataURL(dataImgURL); - setIsLoading(false); - } - - return ( - <> -
-

Template Text

-
-
- - generateImage(map)} - onDownload={() => downloadFile(dataURL, 'Map Chart')} - className="mt-4" - props={{ - height: 290, - }} - > - Share - - - ); - }, -}; - -const Template = ({ ref }: { ref: React.RefObject }) => { - // const ref = React.useRef(null); - - // React.useEffect(() => { - // if (ref.current === null) return; - // const { map: mapInit } = initMap(ref.current, mapProps); - - // return () => { - // mapInit.remove(); - // }; - // }, []); - - document.querySelector('map-count') && - initMap(document.querySelector('map-count') as HTMLElement, mapProps); - - return ( -
-

Template Text

-
-
- ); -}; diff --git a/packages/opub-ui/src/components/Satori/chart.ts b/packages/opub-ui/src/components/Satori/chart.ts deleted file mode 100644 index a1f2028c..00000000 --- a/packages/opub-ui/src/components/Satori/chart.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { LineChart } from 'echarts/charts'; -import { GridComponent } from 'echarts/components'; -import * as echarts from 'echarts/core'; -import { UniversalTransition } from 'echarts/features'; -import { SVGRenderer } from 'echarts/renderers'; - -export function initChart(chartDom: HTMLElement) { - echarts.use([GridComponent, LineChart, SVGRenderer, UniversalTransition]); - - var myChart = echarts.init(chartDom); - var option; - - option = { - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - }, - yAxis: { - type: 'value', - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line', - }, - ], - }; - - option && myChart.setOption(option); - - return myChart; -} diff --git a/packages/opub-ui/src/components/Satori/map.ts b/packages/opub-ui/src/components/Satori/map.ts deleted file mode 100644 index c2eee112..00000000 --- a/packages/opub-ui/src/components/Satori/map.ts +++ /dev/null @@ -1,101 +0,0 @@ -import L from 'leaflet'; - -import 'tilelayer-canvas'; - -import { features } from '../../../assets/json/assam.json'; - -const legendData = [ - { - label: '331+', - color: '#a50f15', - }, - { - label: '326 - 330', - color: '#de2d26', - }, - { - label: '321 - 325', - color: '#fb6a4a', - }, - { - label: '316 - 320', - color: '#fc9272', - }, - { - label: '311 - 315', - color: '#fcbba1', - }, - { - label: '0 - 310', - color: '#fee5d9', - }, -]; - -const mapDataFn = (value: number) => { - return value >= 330 - ? '#a50f15' - : value >= 325 - ? '#de2d26' - : value >= 320 - ? '#fb6a4a' - : value >= 315 - ? '#fc9272' - : value >= 310 - ? '#fcbba1' - : '#fee5d9'; -}; - -const legendHeading = { - heading: 'Districts', - subheading: 'Average Rainfall (mm)', -}; - -export function initMap( - mapDom: HTMLElement, - props: { - center: any; - zoom: number; - zoomControl: boolean; - mapDataFn: (value: number) => string; - fillOpacity: number; - color: string; - weight: number; - features: any; - tile: string; - maxZoom: number; - code: string; - }, - onTileLoad?: (map: any) => void -) { - const map = L.map(mapDom, { - center: L.latLng(props.center), - zoom: props.zoom, - zoomControl: props.zoomControl, - }); - - // @ts-expect-error - L.geoJSON(features, { - style: function (feature: any) { - return { - fillColor: props.mapDataFn(feature.properties[props.code]), - fillOpacity: props.fillOpacity, - color: props.color, - weight: props.weight, - }; - }, - // onEachFeature: function (feature, layer) { - // layer.bindPopup( - // `${feature.properties.dt_name}
${feature.properties.dt_code}` - // ); - // }, - }).addTo(map); - - let tiles = L.tileLayer - // @ts-expect-error - // .canvas(props.tile, { - // maxZoom: props.maxZoom, - // }) - .addTo(map); - - return { map, tiles }; -}