@riffcreative/lsw-eui-generator v1.1.2

LSW EUI Graphic Generator

Install

# npm
npm i @riffcreative/lsw-eui-generator

# yarn
yarn add @riffcreative/lsw-eui-generator

Usage

Import into your component and render it! The default functionality of the component include the form and the PNG download button. Props listed below can customize the functionality to your use case.

import { EUIGenerator } from '@riffcreative/lsw-eui-generator'

export const MyComponent => {
  return <EUIGenerator />
}

Props

hideDownload: toggles the visibility of the download button.

• prop type: boolean

• required: false

• default value: false

hideForm: toggles the visibility of the form.

• prop type: boolean

• required: false

• default value: false

svgData: pass in data to prepopulate the form and/or graph

• prop type: object

• required: false

• default value: {}

The following fields are required (with example values):

{
  modeled_eui: 72,
  target_eui: 48,
  baseline_eui: 120,
  completion_date: 2016,
  plug_loads: 3,
  fans_and_vents: 8,
  heating: 42,
  misc: 12,
  lighting: 15,
  hot_water: 4,
  cooling: 16,
  energy_production: 0,
}

The following fields are not required, and will default to 0 if no data is passed:

{
  modeled_eui_x_offset: 0,
  modeled_eui_y_offset: 0,
  target_eui_x_offset: 0,
  target_eui_y_offset: 0,
}

Development

We use Storybook to develop the app. You can start Storybook by running npm run storybook. One quick note, the package inherits font-family from wherever it is rendered. So besides the font on the generated SVG, it will not be styled within Storybook.