@graphenedata/cli 0.0.12 → 0.0.14

package/dist/docs/base.md

@@ -0,0 +1,98 @@
+Graphene is a framework for doing data analysis as code.
+
+Schema definitions and semantic models are done in `.gsql`, dashboards in `.md`.
+
+## GSQL
+GSQL extends ansi sql with a few key features:
+`table` statements define existing tables, adding joins and dimensions/measures
+`table X as (select ...)` define a table as the result of a query
+`extend` add measures and joins to an existing table, usually used with `table X as (select ...)`
+Implicit joins: `from orders select status, user.name` will automatically join users on to orders
+Measure expansion: `from users select id, orders.revenue` automatically expands to `select users.id, sum(orders.amount) ...`
+- NEVER `sum(revenue)` or `group by revenue`
+- OK: `floor(revenue)`, `revenue / cost`
+`group by all` is implied, and does not need to be put in gsql
+
+A few common features are not supported in gsql, and must be avoided: window functions, subqueries, CTEs.
+
+```sql
+table orders (
+  id BIGINT
+  user_id BIGINT
+  amount FLOAT
+  status STRING
+  join one users on user_id = users.id  -- many orders per user
+  is_complete: status = 'Complete'      -- dimension (scalar expression)
+  revenue: sum(amount)                  -- measure (agg expression)
+  avg_order: revenue / count(*)         -- measures can compose
+)
+table users (
+  id BIGINT
+  name VARCHAR
+  join many orders on id = orders.user_id
+)
+```
+
+## Dashboards
+
+`.md` files with GSQL in code fences, viz components reference query names.
+
+````md
+```gsql monthly_sales
+select date_trunc(created_at, month) as month, revenue from orders
+```
+<LineChart data="monthly_sales" x="month" y="revenue" />
+<BigValue data="monthly_sales" value="revenue" />
+````
+
+`data` can be query name or table name. Attributes accept columns, expressions, or GSQL.
+
+## Components
+
+BarChart: data, x, y, y2, series, title, subtitle, xFmt, yFmt, y2Fmt, colorPalette, type, swapXY, labels, labelFmt, sort, legend, yMin, yMax
+LineChart: data, x, y, y2, series, title, subtitle, xFmt, yFmt, colorPalette, labels, sort, legend, handleMissing, markers, markerShape, lineType, lineWidth
+AreaChart: data, x, y, series, title, subtitle, xFmt, yFmt, colorPalette, type, labels, sort, legend, handleMissing, fillOpacity, line
+PieChart: data, category, value, title, subtitle
+BigValue: data, value, title, fmt, comparison, comparisonFmt, comparisonTitle, downIsGood, sparkline, sparklineType, sparklineColor
+Table: data, rows, title, subtitle, groupBy, groupType, subtotals, totalRow, search, sort, link, rowShading, rowNumbers, compact, headerColor
+Column: id, title, fmt, align, wrap, contentType, totalAgg, redNegatives
+Dropdown: name, data, value, label, defaultValue, multiple, title
+TextInput: name, title, placeholder
+Row: layout container, distributes children horizontally
+
+series: column whose values become separate lines/bars (series=country plots one line per country)
+type: stacked (default), grouped, stacked100
+y2: secondary y-axis, y2SeriesType sets its chart type (line/bar/scatter)
+swapXY: horizontal bars
+handleMissing: gap (default), connect, zero
+colorPalette: comma-separated "#hex1, #hex2", applied to series in order
+seriesOrder: control series order "Val1, Val2", pairs with colorPalette
+labels: show value labels on chart
+markers: show dots on line points; markerShape: circle, emptyCircle, rect, triangle, diamond
+lineType: solid, dashed, dotted
+downIsGood: green for negative (for comparison/delta)
+sparkline: date column for mini trend; sparklineType: line, area, bar
+groupBy: group table rows; groupType: accordion (collapsible) or section (merged)
+totalRow: sum row at bottom; subtotals: sum row per group
+link: make table rows clickable, value is URL column
+
+Column contentType:
+- delta: arrows+colors. deltaSymbol, downIsGood, chip, neutralMin/Max
+- colorscale: background gradient. colorScale, colorMin/Mid/Max
+- bar: in-cell bar. barColor, negativeBarColor
+- link: clickable. linkLabel, openInNewTab
+- image: show image. height, width
+- sparkline/sparkarea/sparkbar: mini chart from array. sparkX, sparkY, sparkColor
+
+Column totalAgg: sum (default), mean, weightedMean, median, min, max, count, countDistinct
+
+Inputs: reference as $name in queries. `<Dropdown name=status .../>` -> `where status = $status`
+
+## Formatting
+
+`fmt` attr accepts Excel codes or built-ins:
+Numbers: num0-num4, num0k, num0m, num0b
+Currency: usd, usd0, usd1k, usd2m (also eur, gbp, etc)
+Percent: pct, pct0, pct1, pct2
+Dates: shortdate, longdate, mdy, dmy, mmm, yyyy
+Excel: "$#,##0.00", "0.0%", "m/d/yy"

package/dist/docs/cli.md

@@ -0,0 +1,22 @@
+## CLI
+
+When using Graphene from the CLI, the main command would be:
+
+`npm exec graphene check`
+
+Use the appropriate package manager if this project doesn't use npm. `check` takes several options
+
+```bash
+npm exec graphene check # Syntax check entire project
+npm exec graphene check [mdPath] # Check specific markdown file, and take a screenshot
+npm exec graphene check [mdPath] -c [chartTitle] # Check and get a screenshot for one specific chart
+```
+
+`npm exec graphene run "<sql>"` can be used to run sql directly, without creating a md file.
+`npm exec graphene compile "<sql>"` shows the compiled, dialect-specific SQL.
+
+### Best Practices
+
+Start simple - Get basic query working, then add complexity.
+Use check often - Catches syntax errors and shows visual output.
+Leverage models - Use modeled joins and stored expressions rather than raw SQL.

package/dist/docs/graphene.md

@@ -109,7 +109,7 @@ GSQL is comprised of four primary statements:
 
 ```sql
 table orders (
-  id BIGINT primary_key
+  id BIGINT
   user_id BIGINT
   created_at DATETIME
   status STRING -- One of 'Processing', 'Shipped', 'Complete', 'Cancelled', 'Returned'
@@ -126,7 +126,7 @@ table orders (
 )
 
 table users (
-  id BIGINT primary_key
+  id BIGINT
   name VARCHAR
   email VARCHAR
   age INTEGER
@@ -140,7 +140,7 @@ We can break down a table statement into three parts: [base columns](#base-colum
 
 ### Base columns (required)
 
-The base column set is simply a reflection of the underlying database table's schema. Similar to `create table` statements in regular SQL DDL, you list each column's name and data type. One column must be designated as the primary key.
+The base column set is simply a reflection of the underlying database table's schema. Similar to `create table` statements in regular SQL DDL, you list each column's name and data type.
 
 ### Join relationships
 
@@ -231,7 +231,7 @@ table orders (
 )
 
 table users (
-  id BIGINT primary_key,
+  id BIGINT,
   name VARCHAR,
   ...
 )
@@ -270,7 +270,7 @@ table users (
 )
 
 table countries (
-  code VARCHAR primary_key
+  code VARCHAR
   name VARCHAR
   currency VARCHAR
   free_shipping BOOLEAN
@@ -300,7 +300,7 @@ Again, using the orders table from before:
 
 ```sql
 table orders (
-  id BIGINT primary_key
+  id BIGINT
   user_id BIGINT
   created_at DATETIME
   status STRING -- One of 'Processing', 'Shipped', 'Complete', 'Cancelled', 'Returned'
@@ -385,7 +385,7 @@ Here's an example of a fan-out:
 
 ```sql
 table orders (
-  id BIGINT primary_key
+  id BIGINT
   customer_name VARCHAR
   amt_with_shipping FLOAT
 
@@ -393,7 +393,7 @@ table orders (
 )
 
 table order_items (
-  id BIGINT primary_key
+  id BIGINT
   order_id BIGINT
   product VARCHAR
   price FLOAT
@@ -583,7 +583,7 @@ You can turn the output of any `select` statement into a table with `table foo a
 
 ```sql
 table orders (
-  id BIGINT primary_key
+  id BIGINT
   user_id BIGINT
   created_at DATETIME
   status STRING -- One of 'Processing', 'Shipped', 'Complete', 'Cancelled', 'Returned'
@@ -600,7 +600,7 @@ table orders (
 )
 
 table users (
-  id BIGINT primary_key
+  id BIGINT
   name VARCHAR
   email VARCHAR
   age INTEGER

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

@@ -4,7 +4,7 @@ import * as chartWindowDebug from './chartWindowDebug'
 
 /**
  * @typedef {import("echarts").EChartsOption & {
- *     dispatch?: ReturnType<typeof import("svelte").createEventDispatcher>;
+ *     onclick?: (params: any) => void;
  *     showAllXAxisLabels?: boolean;
  *    theme: 'light' | 'dark';
  *   }
@@ -148,9 +148,8 @@ const echartsAction = (node, options) => {
   applySeriesOptions()
 
   // Click event handler:
-  let dispatch = options.dispatch
   chart.on('click', function (params) {
-    dispatch('click', params)
+    options.onclick?.(params)
   })
 
   // watching parent element is necessary for charts within `Fullscreen` components

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

@@ -241,18 +241,10 @@ function maybeExtractFormatTag (columnName) {
  * Formats a value to whichever format is passed in
  * @param {*} value the value to be formatted
  * @param {string} format string containing an Excel-style format code, or a format name matching a built-in or custom format
+ * @param {'number' | 'date' | 'boolean' | 'string'} [valueType] the known column type
  * @returns a formatted value
  */
-export function fmt (value, format) {
-  let formatObj = getFormatObjectFromString(format)
-  let valueType = valueTypeFromSample(value)
-  formatObj.valueType = valueType
+export function fmt (value, format, valueType = undefined) {
+  let formatObj = getFormatObjectFromString(format, valueType)
   return formatValue(value, formatObj)
 }
-
-function valueTypeFromSample (value) {
-  if (typeof value === 'number') return 'number'
-  if (typeof value === 'boolean') return 'boolean'
-  if (value instanceof Date) return 'date'
-  return 'string'
-}

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

@@ -227,8 +227,9 @@ export default function getSeriesConfig (
 
   // format series config:
   if (seriesLabelFmt) {
+    let seriesType = series ? columnSummary[series]?.type : undefined
     seriesConfig.forEach((item) => {
-      item.name = fmt(item.name, seriesLabelFmt)
+      item.name = fmt(item.name, seriesLabelFmt, seriesType)
     })
   }
 

package/dist/ui/components/Area.svelte

@@ -1,177 +1,214 @@
-<script>
-  import {beforeUpdate, getContext} from 'svelte'
+<script lang="ts">
+  import {getContext} from 'svelte'
+  import type {Writable} from 'svelte/store'
   import {propKey, configKey} from '../component-utilities/chartContext.js'
   import getSeriesConfig from '../component-utilities/getSeriesConfig.js'
   import formatTitle from '../component-utilities/formatTitle.js'
   import replaceNulls from '../component-utilities/replaceNulls.js'
   import getCompletedData from '../component-utilities/getCompletedData.js'
-  import {
-    formatValue,
-    getFormatObjectFromString,
-  } from '../component-utilities/formatting.js'
+  import {formatValue, getFormatObjectFromString} from '../component-utilities/formatting.js'
   import {getThemeStores} from '../component-utilities/themeStores'
   import {parseCommaList} from '../component-utilities/inputUtils.ts'
 
-  const {resolveColor} = getThemeStores()
-  const props = getContext(propKey)
-  const config = getContext(configKey)
-
-  export let y = undefined
-  const ySet = !!y
-  export let series = undefined
-  const seriesSet = !!series
-  export let options = undefined
-  export let name = undefined
-  export let type = 'stacked'
-  export let fillColor = undefined
-  $: fillColorStore = resolveColor(fillColor)
-  export let lineColor = undefined
-  $: lineColorStore = resolveColor(lineColor)
-  export let fillOpacity = undefined
-  export let line = true
-  $: line = line === 'true' || line === true
-  export let markers = false
-  $: markers = markers === 'true' || markers === true
-  export let markerShape = 'circle'
-  export let markerSize = 8
-  export let handleMissing = 'gap'
-  export let step = false
-  $: step = step === 'true' || step === true
-  export let stepPosition = 'end'
-  export let labels = false
-  $: labels = labels === 'true' || labels === true
-  export let labelSize = 11
-  export let labelPosition = 'top'
-  export let labelColor = undefined
-  $: labelColorStore = resolveColor(labelColor)
-  export let labelFmt = undefined
-  export let showAllLabels = false
-  export let seriesOrder = undefined
-  export let seriesLabelFmt = undefined
-
-  let labelFormat
-  let data
-  let x
-  let swapXY
-  let yFormat
-  let xType
-  let xMismatch
-  let columnSummary
-  let seriesConfig
-  let chartOverrides
-  let defaultLabelPosition
-  let resolvedY
-  let stackName
-
-  if (labelFmt) labelFormat = getFormatObjectFromString(labelFmt)
-
-  $: data = $props.data
-  $: x = $props.x
-  $: swapXY = $props.swapXY
-  $: yFormat = $props.yFormat
-  $: xType = $props.xType
-  $: xMismatch = $props.xMismatch
-  $: columnSummary = $props.columnSummary
-  $: series = seriesSet ? series : $props.series
-  $: resolvedY = ySet ? parseCommaList(y) : $props.y
-  $: seriesOrder = parseCommaList(seriesOrder)
-
-  $: {
-    if (!series && (!Array.isArray(resolvedY) || resolvedY.length === 1)) {
-      stackName = undefined
-      let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
-      if (columnSummary?.[col]) name = name ?? formatTitle(col, columnSummary[col].title)
-    } else {
-      stackName = 'area'
-      data = getCompletedData(data, x, resolvedY, series, false, xType === 'value')
-      data = replaceNulls(data, resolvedY)
-      xType = xType === 'value' ? 'category' : xType
-    }
+  interface Props {
+    y?: any, series?: any, options?: any, name?: any, type?: string, fillColor?: any, lineColor?: any
+    fillOpacity?: any, line?: boolean | string, markers?: boolean | string, markerShape?: string
+    markerSize?: number, handleMissing?: string, step?: boolean | string, stepPosition?: string
+    labels?: boolean | string, labelSize?: number, labelPosition?: string, labelColor?: any
+    labelFmt?: any, showAllLabels?: boolean | string, seriesOrder?: any, seriesLabelFmt?: any
   }
 
-  $: if (handleMissing === 'zero') data = replaceNulls(data, resolvedY)
+  const {resolveColor} = getThemeStores()
+  const chartProps: Writable<any> = getContext(propKey)
+  const config: Writable<any> = getContext(configKey)
+
+  let {
+    y = undefined, series = undefined, options = undefined, name = undefined, type = 'stacked',
+    fillColor = undefined, lineColor = undefined, fillOpacity = undefined, line = true, markers = false,
+    markerShape = 'circle', markerSize = 8, handleMissing = 'gap', step = false, stepPosition = 'end',
+    labels = false, labelSize = 11, labelPosition = 'top', labelColor = undefined, labelFmt = undefined,
+    showAllLabels = false, seriesOrder = undefined, seriesLabelFmt = undefined,
+  }: Props = $props()
+
+  // Use $derived for values that depend on props
+  let ySet = $derived(y ? true : false)
+  let seriesSet = $derived(series ? true : false)
+
+  let fillColorStore = $derived(resolveColor(fillColor))
+  let lineColorStore = $derived(resolveColor(lineColor))
+  let lineBool = $derived(line === 'true' || line === true)
+  let markersBool = $derived(markers === 'true' || markers === true)
+  let stepBool = $derived(step === 'true' || step === true)
+  let labelsBool = $derived(labels === 'true' || labels === true)
+  let labelColorStore = $derived(resolveColor(labelColor))
+
+  // Format objects derived from props
+  let labelFormat = $derived(labelFmt ? getFormatObjectFromString(labelFmt) : undefined)
 
   const labelPositions = {above: 'top', below: 'bottom', middle: 'inside'}
   const swapXYLabelPositions = {above: 'right', below: 'left', middle: 'inside'}
 
-  $: {
-    defaultLabelPosition = swapXY ? 'right' : 'top'
-    labelPosition = (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition
-  }
+  // Derive values from chartProps store instead of using $effect to assign
+  let data = $derived($chartProps.data)
+  let x = $derived($chartProps.x)
+  let swapXY = $derived($chartProps.swapXY)
+  let yFormat = $derived($chartProps.yFormat)
+  let baseXType = $derived($chartProps.xType)
+  let xMismatch = $derived($chartProps.xMismatch)
+  let columnSummary = $derived($chartProps.columnSummary)
+  let resolvedSeries = $derived(seriesSet ? series : $chartProps.series)
+  let resolvedY = $derived(ySet ? parseCommaList(y) : $chartProps.y)
+  let resolvedSeriesOrder = $derived(parseCommaList(seriesOrder))
 
-  $: baseConfig = {
-    type: 'line',
-    stack: stackName,
-    areaStyle: {color: $fillColorStore, opacity: fillOpacity},
-    connectNulls: handleMissing === 'connect',
-    lineStyle: {width: line ? 1 : 0, color: $lineColorStore},
-    label: {
-      show: labels,
-      formatter: (params) =>
-        params.value[swapXY ? 0 : 1] === 0
-          ? ''
-          : formatValue(params.value[swapXY ? 0 : 1], labelFormat ?? yFormat),
-      fontSize: labelSize,
-      color: $labelColorStore,
-      position: labelPosition,
-      padding: 3,
-    },
-    labelLayout: {hideOverlap: showAllLabels ? false : true},
-    emphasis: {focus: 'series'},
-    showSymbol: labels || markers,
-    symbol: markerShape,
-    symbolSize: labels && !markers ? 0 : markerSize,
-    step: step ? stepPosition : false,
-  }
+  // Compute all the derived state in one $derived.by block to avoid read/write conflicts
+  let computedState = $derived.by(() => {
+    let isSingleSeries = !resolvedSeries && (!Array.isArray(resolvedY) || resolvedY.length === 1)
+    let computedData = data
+    let computedXType = baseXType
+    let computedName = name
+    let computedStackName: string | undefined = undefined
+    let computedDefaultLabelPosition = swapXY ? 'right' : 'top'
 
-  $: seriesConfig = getSeriesConfig(
-    data,
-    x,
-    resolvedY,
-    series,
-    swapXY,
-    baseConfig,
-    name,
-    xMismatch,
-    columnSummary,
-    seriesOrder,
-    undefined,
-    undefined,
-    undefined,
-    seriesLabelFmt,
-  )
+    if (!data || !columnSummary) {
+      return {
+        data: computedData,
+        xType: computedXType,
+        name: computedName,
+        stackName: computedStackName,
+        defaultLabelPosition: computedDefaultLabelPosition,
+      }
+    }
+
+    if (isSingleSeries) {
+      // Single Series
+      let col = Array.isArray(resolvedY) ? resolvedY[0] : resolvedY
+      if (col && columnSummary[col]) {
+        computedName = computedName ?? formatTitle(col, columnSummary[col].title)
+      }
+    } else {
+      // Multi Series
+      computedStackName = 'area'
+      computedData = getCompletedData(computedData, x, resolvedY, resolvedSeries, false, computedXType === 'value')
+      computedData = replaceNulls(computedData, resolvedY)
+      computedXType = computedXType === 'value' ? 'category' : computedXType
+    }
+
+    // Handle missing values
+    if (handleMissing === 'zero') {
+      computedData = replaceNulls(computedData, resolvedY)
+    }
 
-  $: config.update((value) => {
-    value.series.push(...seriesConfig)
-    value.legend.data.push(...seriesConfig.map((entry) => entry.name.toString()))
-    return value
+    return {
+      data: computedData,
+      xType: computedXType,
+      name: computedName,
+      stackName: computedStackName,
+      defaultLabelPosition: computedDefaultLabelPosition,
+    }
   })
 
-  $: if (options) {
-    config.update((value) => ({...value, ...options}))
-  }
+  // Extract computed values for use in template and other derived values
+  let processedData = $derived(computedState.data)
+  let xType = $derived(computedState.xType)
+  let resolvedName = $derived(computedState.name)
+  let resolvedStackName = $derived(computedState.stackName)
+  let defaultLabelPosition = $derived(computedState.defaultLabelPosition)
+
+  let resolvedLabelPosition = $derived(
+    (swapXY ? swapXYLabelPositions[labelPosition] : labelPositions[labelPosition]) ?? defaultLabelPosition,
+  )
 
-  $: chartOverrides = {
+  let chartOverrides = $derived({
     yAxis: {boundaryGap: ['0%', '1%']},
     xAxis: {boundaryGap: ['4%', '4%'], type: xType},
-  }
+  })
 
-  beforeUpdate(() => {
-    config.update((value) => {
-      value.tooltip = {...value.tooltip, order: 'seriesDesc'}
-      if (swapXY) {
-        value.yAxis = {...value.yAxis, ...chartOverrides.xAxis}
-        value.xAxis = {...value.xAxis, ...chartOverrides.yAxis}
-      } else {
-        value.yAxis[0] = {...value.yAxis[0], ...chartOverrides.yAxis}
-        value.xAxis = {...value.xAxis, ...chartOverrides.xAxis}
-      }
-      if (type === 'stacked100') {
-        if (swapXY) value.xAxis = {...value.xAxis, max: 1}
-        else value.yAxis[0] = {...value.yAxis[0], max: 1}
-      }
-      if (labels) value.axisPointer = {triggerEmphasis: false}
-      return value
+  $effect(() => {
+    // Don't run until we have data
+    if (!processedData || !columnSummary) return
+
+    let baseConfig = {
+      type: 'line',
+      stack: resolvedStackName,
+      areaStyle: {color: $fillColorStore, opacity: fillOpacity},
+      connectNulls: handleMissing === 'connect',
+      lineStyle: {width: lineBool ? 1 : 0, color: $lineColorStore},
+      label: {
+        show: labelsBool,
+        formatter: (params: any) =>
+          params.value[swapXY ? 0 : 1] === 0
+            ? ''
+            : formatValue(params.value[swapXY ? 0 : 1], labelFormat ?? yFormat),
+        fontSize: labelSize,
+        color: $labelColorStore,
+        position: resolvedLabelPosition,
+        padding: 3,
+      },
+      labelLayout: {hideOverlap: showAllLabels ? false : true},
+      emphasis: {focus: 'series'},
+      showSymbol: labelsBool || markersBool,
+      symbol: markerShape,
+      symbolSize: labelsBool && !markersBool ? 0 : markerSize,
+      step: stepBool ? stepPosition : false,
+    }
+
+    let seriesConfig = getSeriesConfig(
+      processedData,
+      x,
+      resolvedY,
+      resolvedSeries,
+      swapXY,
+      baseConfig,
+      resolvedName,
+      xMismatch,
+      columnSummary,
+      resolvedSeriesOrder,
+      undefined,
+      undefined,
+      undefined,
+      seriesLabelFmt,
+    )
+
+    config.update((d: any) => {
+      // Guard against incomplete config state
+      if (!d.series) d.series = []
+      if (!d.legend) d.legend = {data: []}
+      if (!d.legend.data) d.legend.data = []
+
+      d.series.push(...seriesConfig)
+      d.legend.data.push(...seriesConfig.map((entry: any) => entry.name.toString()))
+      return d
     })
   })
+
+  // Use $effect.pre() instead of beforeUpdate for runes mode
+  $effect.pre(() => {
+    if (options) {
+      config.update((d: any) => ({...d, ...options}))
+    }
+
+    if (chartOverrides) {
+      config.update((d: any) => {
+        // Guard against incomplete config state
+        if (!d.yAxis || !Array.isArray(d.yAxis)) return d
+
+        d.tooltip = {...d.tooltip, order: 'seriesDesc'}
+        if (swapXY) {
+          d.yAxis = {...d.yAxis, ...chartOverrides.xAxis}
+          d.xAxis = {...d.xAxis, ...chartOverrides.yAxis}
+        } else {
+          if (d.yAxis[0]) {
+            d.yAxis[0] = {...d.yAxis[0], ...chartOverrides.yAxis}
+          }
+          d.xAxis = {...d.xAxis, ...chartOverrides.xAxis}
+        }
+        if (type === 'stacked100') {
+          if (swapXY) d.xAxis = {...d.xAxis, max: 1}
+          else if (d.yAxis[0]) d.yAxis[0] = {...d.yAxis[0], max: 1}
+        }
+        if (labelsBool) d.axisPointer = {triggerEmphasis: false}
+        return d
+      })
+    }
+  })
 </script>