@graphenedata/cli 0.0.14 → 0.0.16

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

@@ -1,272 +0,0 @@
-import {registerTheme, init, connect} from 'echarts/dist/echarts.esm.js'
-import {evidenceThemeDark, evidenceThemeLight} from './echartsThemes'
-import * as chartWindowDebug from './chartWindowDebug'
-
-/**
- * @typedef {import("echarts").EChartsOption & {
- *     onclick?: (params: any) => void;
- *     showAllXAxisLabels?: boolean;
- *    theme: 'light' | 'dark';
- *   }
- * } EChartsActionOptions
- */
-
-const ANIMATION_DURATION = 0
-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,
-    animation: false,
-    animationDuration: ANIMATION_DURATION,
-    animationDurationUpdate: ANIMATION_DURATION,
-  })
-
-  applySeriesColors()
-  applyEchartsOptions()
-  applySeriesOptions()
-
-  // Click event handler:
-  chart.on('click', function (params) {
-    options.onclick?.(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,
-        animation: false,
-        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)
-    },
-  }
-}
-
-const debounce = (callback, wait) => {
-  let timeoutId = null
-  return (...args) => {
-    window.clearTimeout(timeoutId)
-    timeoutId = window.setTimeout(() => {
-      callback(...args)
-    }, wait)
-  }
-}
-
-export default echartsAction

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

@@ -1,453 +0,0 @@
-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')