@graphenedata/cli 0.0.1

package/dist/ui/component-utilities/echarts.js

@@ -0,0 +1,262 @@
+import {registerTheme, init, connect} from 'echarts/dist/echarts.esm.js'
+import {evidenceThemeDark, evidenceThemeLight} from './echartsThemes'
+import debounce from 'debounce'
+import * as chartWindowDebug from './chartWindowDebug'
+
+/**
+ * @typedef {import("echarts").EChartsOption & {
+ *     dispatch?: ReturnType<typeof import("svelte").createEventDispatcher>;
+ *     showAllXAxisLabels?: boolean;
+ *    theme: 'light' | 'dark';
+ *   }
+ * } EChartsActionOptions
+ */
+
+const ANIMATION_DURATION = 500
+const pendingChartsKey = Symbol.for('graphene.pendingCharts')
+
+/** @returns {Set<number> | null} */
+const getPendingCharts = () => {
+  if (typeof window === 'undefined') return null
+  window[pendingChartsKey] ??= new Set()
+  return window[pendingChartsKey]
+}
+
+/** @param {number} chartId */
+const markChartPending = (chartId) => {
+  let pending = getPendingCharts()
+  if (!pending) return
+  pending.add(chartId)
+}
+
+/** @param {number} chartId */
+const markChartFinished = (chartId) => {
+  let pending = getPendingCharts()
+  if (!pending) return
+  pending.delete(chartId)
+}
+
+/** @param {HTMLElement} node */
+/** @param {EChartsActionOptions} options */
+const echartsAction = (node, options) => {
+  // https://github.com/evidence-dev/evidence/issues/1323
+  let useSvg =
+    ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(
+      navigator.platform,
+      // ios breaks w/ canvas if the canvas is too large
+    ) && node.clientWidth * 3 * node.clientHeight * 3 > 16777215
+
+  registerTheme('light', evidenceThemeLight)
+  registerTheme('dark', evidenceThemeDark)
+
+  let chart
+
+  let initChart = () => {
+    chart = init(node, options.theme, {
+      renderer: useSvg ? 'svg' : (options.renderer ?? 'canvas'),
+    })
+    markChartPending(chart.id)
+    chart.on('finished', () => markChartFinished(chart.id))
+  }
+
+  initChart()
+
+  chartWindowDebug.set(chart.id, chart)
+
+  // If connectGroup supplied, connect chart to other charts matching that connectGroup
+  if (options.connectGroup) {
+    chart.group = options.connectGroup
+    connect(options.connectGroup)
+  }
+
+  // This function applies overrides to the echarts config generated by our chart components.
+  // In cases where these affect the spacing of the chart, some jumping/reanimation will be visible when
+  // the chart is animated. This is because we need to pass the initial options without the overrides to echarts
+  // first in order to use setOption()'s built-in merge capability. I believe the only way around this is
+  // to handle the option merge ourselves, then pass the final config object to setOption().
+
+  // Series Color override
+  let applySeriesColors = () => {
+    if (options.seriesColors) {
+      /** @type {import("echarts").EChartsOption} */
+      let prevOption = chart.getOption()
+      if (!prevOption) return
+      let newOption = {...prevOption}
+      for (let seriesName of Object.keys(options.seriesColors)) {
+        let matchingSeriesIndex = prevOption.series.findIndex((s) => s.name === seriesName)
+        if (matchingSeriesIndex !== -1) {
+          newOption.series[matchingSeriesIndex] = {
+            ...newOption.series[matchingSeriesIndex],
+            itemStyle: {
+              ...newOption.series[matchingSeriesIndex].itemStyle,
+              color: options.seriesColors[seriesName],
+            },
+          }
+        }
+      }
+      chart.setOption(newOption)
+    }
+  }
+
+  // Check if echartsOptions are provided and apply them
+  let applyEchartsOptions = () => {
+    if (options.echartsOptions) {
+      chart.setOption({
+        ...options.echartsOptions,
+      })
+    }
+  }
+
+  // seriesOptions - loop through series and apply same changes to each
+  let applySeriesOptions = () => {
+    let tempSeries = []
+    if (options.seriesOptions) {
+      let reference_index = options.config.series.reduce(
+        (acc, {evidenceSeriesType}, reference_index) => {
+          if (
+            evidenceSeriesType === 'reference_line' ||
+            evidenceSeriesType === 'reference_area' ||
+            evidenceSeriesType === 'reference_point'
+          ) {
+            acc.push(reference_index)
+          }
+          return acc
+        },
+        [],
+      )
+
+      for (let i = 0; i < options.config.series.length; i++) {
+        if (reference_index.includes(i)) {
+          tempSeries.push({})
+        } else {
+          tempSeries.push({...options.seriesOptions})
+        }
+      }
+      chart.setOption({series: tempSeries})
+    }
+  }
+
+  // Initial options set:
+  chart.setOption({
+    ...options.config,
+    animationDuration: ANIMATION_DURATION,
+    animationDurationUpdate: ANIMATION_DURATION,
+  })
+
+  applySeriesColors()
+  applyEchartsOptions()
+  applySeriesOptions()
+
+  // Click event handler:
+  let dispatch = options.dispatch
+  chart.on('click', function (params) {
+    dispatch('click', params)
+  })
+
+  // watching parent element is necessary for charts within `Fullscreen` components
+  let parentElement = node.parentElement
+  let onWindowResize = debounce(() => {
+    chart.resize({
+      animation: {
+        duration: ANIMATION_DURATION,
+      },
+    })
+    updateLabelWidths()
+  }, 100)
+
+  let resizeObserver
+  if (window.ResizeObserver && parentElement) {
+    resizeObserver = new ResizeObserver(onWindowResize)
+    resizeObserver.observe(parentElement)
+  } else {
+    window.addEventListener('resize', onWindowResize)
+  }
+
+  // Label width setting:
+  let updateLabelWidths = () => {
+    if (options.showAllXAxisLabels) {
+      // Make sure we operate on an up-to-date options object
+      /** @type {import("echarts").EChartsOption} */
+      let prevOption = chart.getOption()
+      if (!prevOption) return
+      // If the options object includes showing all x axis labels
+      // Note: this isn't a standard option, but right now this is the easiest way to pass something to the action.
+      // We don't want to have multiple resize observers if we can avoid it, and this is all due for a cleanup anyways
+      // Get all the possible x values
+      let distinctXValues = new Set(prevOption.series.flatMap((s) => s.data?.map((d) => d[0])))
+      let modConst = 4 / 5
+      let clientWidth = node?.clientWidth ?? 0
+
+      // We disable this behavior because it doesn't make sense on horizontal bar charts
+      // Category labels will grow to be visible
+      // Value labels are interpolatable anyway
+      if (!options.swapXY) {
+        /** @type {import("echarts").EChartsOption} */
+        let newOption = {
+          xAxis: {
+            axisLabel: {
+              interval: 0,
+              overflow: options.xAxisLabelOverflow,
+              width: (clientWidth * modConst) / distinctXValues.size,
+            },
+          },
+        }
+        chart.setOption(newOption)
+      }
+    }
+  }
+
+  /** @param {EChartsActionOptions} newOptions */
+  let updateChart = (newOptions) => {
+    if (newOptions.theme !== options.theme) {
+      chart.dispose()
+      options = newOptions
+      initChart()
+    }
+
+    options = newOptions
+    markChartPending(chart.id)
+    chart.setOption(
+      {
+        ...options.config,
+        animationDuration: ANIMATION_DURATION,
+        animationDurationUpdate: ANIMATION_DURATION,
+      },
+      true,
+    )
+    applySeriesColors()
+    applyEchartsOptions()
+    applySeriesOptions()
+    markChartPending(chart.id)
+    chart.resize({
+      animation: {
+        duration: ANIMATION_DURATION,
+      },
+    })
+    updateLabelWidths()
+  }
+
+  onWindowResize()
+
+  window[Symbol.for('chart renders')] ??= 0
+  window[Symbol.for('chart renders')]++
+  return {
+    update (options) {
+      window[Symbol.for('chart renders')]++
+      updateChart(options)
+    },
+    destroy () {
+      if (resizeObserver) {
+        resizeObserver.unobserve(parentElement)
+      } else {
+        window.removeEventListener('resize', onWindowResize)
+      }
+      markChartFinished(chart.id)
+      chart.dispose()
+
+      chartWindowDebug.unset(chart.id)
+    },
+  }
+}
+
+export default echartsAction

package/dist/ui/component-utilities/echartsThemes.js

@@ -0,0 +1,453 @@
+import {themes} from '../internal/theme'
+
+/** @param {'light' | 'dark'} mode */
+const createTheme = (mode) => {
+  let axisBaselineColor = themes[mode].colors['base-content-muted']
+  let axisTickColor = themes[mode].colors['base-content-muted']
+  let axisLabelColor = themes[mode].colors['base-content-muted']
+  let gridlineColor = themes[mode].colors['base-300']
+  let axisTitleBackgroundColor = themes[mode].colors['base-100']
+  let legendTextColor = themes[mode].colors['base-content-muted']
+  let legendPageIconColor = themes[mode].colors['base-content-muted']
+  let legendPageTextColor = themes[mode].colors['base-content-muted']
+  let tooltipBorderColor = themes[mode].colors['base-300']
+  let tooltipBackgroundColor = themes[mode].colors['base-100']
+  let tooltipTextColor = themes[mode].colors['base-content']
+  let titleColor = themes[mode].colors['base-heading']
+  let subtitleColor = themes[mode].colors['base-content-muted']
+
+  return {
+    darkMode: mode === 'dark', // if true, echarts will automatically update the font colour to work better on dark background
+    backgroundColor: themes[mode].colors['base-100'],
+    textStyle: {
+      fontFamily: ['Inter', 'sans-serif'],
+    },
+    grid: {
+      left: '1%',
+      right: '4%',
+      bottom: '0%',
+      top: '15%',
+      containLabel: true,
+    },
+    color: themes[mode].colorPalettes.default,
+    title: {
+      padding: 0,
+      itemGap: 7,
+      textStyle: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: titleColor,
+      },
+      subtextStyle: {
+        fontSize: 13,
+        color: subtitleColor,
+        overflow: 'break',
+      },
+      top: '1px',
+    },
+    line: {
+      itemStyle: {
+        borderWidth: 0,
+      },
+      lineStyle: {
+        width: 2,
+        join: 'round',
+      },
+      symbolSize: 0,
+      symbol: 'circle',
+      smooth: false,
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 0,
+      },
+      lineStyle: {
+        width: 2,
+      },
+      symbolSize: 0,
+      symbol: 'circle',
+      smooth: false,
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    boxplot: {
+      itemStyle: {
+        borderWidth: 1.5,
+        // borderColor: '#cccccc'
+      },
+    },
+    parallel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    sankey: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    funnel: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    gauge: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+    },
+    candlestick: {
+      itemStyle: {
+        color: '#eb5454',
+        color0: '#47b262',
+        borderColor: '#eb5454',
+        borderColor0: '#47b262',
+        borderWidth: 1,
+      },
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: '#cccccc',
+      },
+      lineStyle: {
+        width: 1,
+        color: '#aaaaaa',
+      },
+      symbolSize: 0,
+      symbol: 'circle',
+      smooth: false,
+      color: [
+        '#923d59',
+        '#488f96',
+        '#518eca',
+        '#b3a9a0',
+        '#ffc857',
+        '#495867',
+        '#bfdbf7',
+        '#bc4749',
+        '#eeebd0',
+      ],
+      label: {
+        color: '#f2f2f2',
+      },
+    },
+    map: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    geo: {
+      itemStyle: {
+        areaColor: '#eee',
+        borderColor: '#444',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#000',
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: 'rgba(255,215,0,0.8)',
+          borderColor: '#444',
+          borderWidth: 1,
+        },
+        label: {
+          color: 'rgb(100,0,0)',
+        },
+      },
+    },
+    categoryAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: axisBaselineColor,
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: axisTickColor,
+        },
+        length: 3,
+        alignWithLabel: true,
+      },
+      axisLabel: {
+        show: true,
+        color: axisLabelColor,
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: [gridlineColor],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+        },
+      },
+    },
+    valueAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: axisBaselineColor,
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: axisTickColor,
+        },
+        length: 2,
+      },
+      axisLabel: {
+        show: true,
+        color: axisLabelColor,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [gridlineColor],
+          width: 1,
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+        },
+      },
+      nameTextStyle: {
+        backgroundColor: axisTitleBackgroundColor,
+      },
+    },
+    logAxis: {
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: axisBaselineColor,
+        },
+      },
+      axisTick: {
+        show: false,
+        lineStyle: {
+          color: axisTickColor,
+        },
+        length: 2,
+      },
+      axisLabel: {
+        show: true,
+        color: axisLabelColor,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: [gridlineColor],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+        },
+      },
+      nameTextStyle: {
+        backgroundColor: axisTitleBackgroundColor,
+      },
+    },
+    timeAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: axisBaselineColor,
+        },
+      },
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: axisTickColor,
+        },
+        length: 3,
+      },
+      axisLabel: {
+        show: true,
+        color: axisLabelColor,
+      },
+      splitLine: {
+        show: false,
+        lineStyle: {
+          color: [gridlineColor],
+        },
+      },
+      splitArea: {
+        show: false,
+        areaStyle: {
+          color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+        },
+      },
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: '#999999',
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: '#459cde',
+        },
+      },
+    },
+    legend: {
+      textStyle: {
+        padding: [0, 0, 0, -7],
+        color: legendTextColor,
+      },
+      // "padding": [15,0,0,0],
+      icon: 'circle',
+      pageIcons: {
+        horizontal: [
+          'M 17 3 h 2 c 0.386 0 0.738 0.223 0.904 0.572 s 0.115 0.762 -0.13 1.062 L 11.292 15 l 8.482 10.367 c 0.245 0.299 0.295 0.712 0.13 1.062 S 19.386 27 19 27 h -2 c -0.3 0 -0.584 -0.135 -0.774 -0.367 l -9 -11 c -0.301 -0.369 -0.301 -0.898 0 -1.267 l 9 -11 C 16.416 3.135 16.7 3 17 3 Z',
+          'M 12 27 h -2 c -0.386 0 -0.738 -0.223 -0.904 -0.572 s -0.115 -0.762 0.13 -1.062 L 17.708 15 L 9.226 4.633 c -0.245 -0.299 -0.295 -0.712 -0.13 -1.062 S 9.614 3 10 3 h 2 c 0.3 0 0.584 0.135 0.774 0.367 l 9 11 c 0.301 0.369 0.301 0.898 0 1.267 l -9 11 C 12.584 26.865 12.3 27 12 27 Z',
+        ],
+      },
+      pageIconColor: legendPageIconColor,
+      pageIconSize: 12,
+      pageTextStyle: {
+        color: legendPageTextColor,
+      },
+      pageButtonItemGap: -2,
+      animationDurationUpdate: 300,
+    },
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+        crossStyle: {
+          color: '#cccccc',
+          width: 1,
+        },
+      },
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: tooltipBorderColor,
+      backgroundColor: tooltipBackgroundColor,
+      textStyle: {
+        color: tooltipTextColor,
+        fontSize: 12,
+        fontWeight: 400,
+      },
+      padding: 6,
+    },
+    timeline: {
+      lineStyle: {
+        color: '#e3e3e3',
+        width: 2,
+      },
+      itemStyle: {
+        color: '#d6d6d6',
+        borderWidth: 1,
+      },
+      controlStyle: {
+        color: '#bfbfbf',
+        borderColor: '#bfbfbf',
+        borderWidth: 1,
+      },
+      checkpointStyle: {
+        color: '#8f8f8f',
+        borderColor: '#ffffff',
+      },
+      label: {
+        color: '#c9c9c9',
+      },
+      emphasis: {
+        itemStyle: {
+          color: '#9c9c9c',
+        },
+        controlStyle: {
+          color: '#bfbfbf',
+          borderColor: '#bfbfbf',
+          borderWidth: 1,
+        },
+        label: {
+          color: '#c9c9c9',
+        },
+      },
+    },
+    visualMap: {
+      color: ['#c41621', '#e39588', '#f5ed98'],
+    },
+    dataZoom: {
+      type: 'slider',
+      bottom: 10,
+      height: 30,
+      showDetail: false,
+      handleSize: '80%',
+      borderColor: gridlineColor,
+      handleStyle: {
+        borderColor: gridlineColor,
+        color: gridlineColor,
+      },
+      moveHandleStyle: {
+        borderColor: gridlineColor,
+        color: gridlineColor,
+      },
+      textStyle: {},
+      emphasis: {
+        handleStyle: {
+          borderColor: gridlineColor,
+          color: gridlineColor,
+        },
+        moveHandleStyle: {
+          borderColor: gridlineColor,
+          color: gridlineColor,
+        },
+      },
+    },
+    markPoint: {
+      label: {
+        color: '#f2f2f2',
+      },
+      emphasis: {
+        label: {
+          color: '#f2f2f2',
+        },
+      },
+    },
+  }
+}
+
+export const evidenceThemeLight = createTheme('light')
+export const evidenceThemeDark = createTheme('dark')