Widget Studio

System to create & configure widgets.

Getting started

In widget-studio project root:

$ nvm use
$ yarn install
$ yarn start

Navigate to http://localhost:6008 to view the development storybook.

---

Widget component documentation

Props

• id - id of the widget. Defaults is undefined.
• mode - Widget Studio's mode. Default is 'editor'. Options: ['editor', 'ql', 'view_only', 'compact_view_only'].
• wl - EQ Works's whitelabel. Default is null.
• cu - EQ Works's customer. Default is null.
• staticData - Defaults is boolean.
• config - widget configuration object. Ref. Default is null.
• rows - data rows. Default is null.
• columns - data columns. Default is null.
• className - styling classes. Defaults is ''
• allowOpenInEditor - whether or not to allow Editor button in Widget view. Defaults to true.
• onOpenInEditor - callback to handle opening the widget in Editor. Default is null.
• onInsightsDataRequired - callback to pass back {id, dataSourceID, type} to parent element. Default is () => {}.
• saveWithInsightsData - whether to save or not as an Insights Data- sourced widget. Default is false.
• dataProviderResponse - response object from data provider. Default is {}.
• onWidgetRender - callback to determine the state of the widget (ie: rendering). Default is () => {}.
• filters - data filters. Default is []. Example:

  [{ key: 'resolution', filter: [5000] }]
  

• executionID - execution id. Defaults is -1
• sampleData - sample data passed to widget for testing. Defaults to null.
• sampleConfigs - list of sample configs for testing. Default is null.
• mapGroupKey - map group key. Default is ''. Options.
• useMVTOption - whether to use MVT layer in the map when data source is polygons. Default is null.
• mapTooltipLabelTitles - column names for the tooltip titles. Default is null. Example:

  {
    sourceTitle: 'poi_name',
    targetTitle: 'target_poi_name',
    title: 'poi_id',
  }
  

• customXMapLegendLayerTitles - labels for layer names in the legend for cross visit maps. Default is null. Example:

  {
    sourceTitle: 'Shop',
    targetTitle: 'Competitor Shop',
  }
  

• customColors - custom colors to use in chart and maps. Default is null. Example:

  {
    chart: {
    color1: ['#004C86', '#CF7047', '#1F7F79', '#B24456', '#582A7D'],
    color2: [...],
  },
    map: {
      baseColor: '#218CCD',
      targetLayerColor: '',
      iconColor: '#CF7047',
    },
  }
  

• dataFormat - object of data formatting functions. Default is null. Example:

  {
    years: {
      keyList: ['Age Group'],
      formatFunction: (val) => val,
      formatSymbol: {
        isPrefix: false,
        symbol: 'years',
      },
    },
    coxPercentageA: {
      keyList: [
        'rate', 'visits',
      ],
      formatFunction: (val) => numeral(val / 100).format('0.00%'),
      formatSymbol: {
        isPrefix: false,
        symbol: '%',
      },
    },
  }
  

• insightsDataCategories - categories of data for special category map. Default is null. Example:

  {
    population: [
      'Total Population',
      'Male+ Population',
      'Female+ Population',
    ],
    families: [
      'Lone Parent',
      'Couple - no Children',
      'Couple - with Children',
      'Other',
    ],
  }
  

• categoryOrder - list of ordered cateries / columns. Defaults is null. Example:

  ['Population', 'Families']