Created
July 30, 2018 16:46
-
-
Save johnwalley/69bdb18f99d03bec13cd0caacb71a782 to your computer and use it in GitHub Desktop.
React roadmap component examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import { storiesOf } from '@storybook/react'; | |
| import { action } from '@storybook/addon-actions'; | |
| import { withKnobs, object, date, number } from '@storybook/addon-knobs'; | |
| import ResponsiveRoadmap from '../components/ResponsiveRoadmap'; | |
| import Roadmap from '../components/Roadmap'; | |
| import DataTable from '../components/DataTable'; | |
| const data = { | |
| RoadmapTitle: 'Roadmap Title', | |
| LegendEntries: [ | |
| { | |
| LegendConceptID: 420, | |
| LegendMeaningDisplayName: 'Delivered', | |
| LegendMeaningDescription: null, | |
| PrimaryShapeName: 'circle', | |
| PrimaryShapeColourPrimary: '4080B0', | |
| PrimaryShapeColourSecondary: null, | |
| PrimaryShapeScale: 1, | |
| }, | |
| { | |
| LegendConceptID: 421, | |
| LegendMeaningDisplayName: 'Planning Now', | |
| LegendMeaningDescription: null, | |
| PrimaryShapeName: 'circle', | |
| PrimaryShapeColourPrimary: '4080B0', | |
| PrimaryShapeColourSecondary: null, | |
| PrimaryShapeScale: 1, | |
| }, | |
| ], | |
| Slices: [ | |
| { | |
| SliceTitle: 'Tech For Good', | |
| RoadmapSliceEvents: [ | |
| { | |
| EventDisplayName: 'FemTech', | |
| EventDate0: '2018-11-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'delivered', | |
| }, | |
| { | |
| EventDisplayName: 'Autism', | |
| EventDate0: '2018-12-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'planning_now', | |
| }, | |
| { | |
| EventDisplayName: 'Water Industry', | |
| EventDate0: '2019-03-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'planning_next', | |
| }, | |
| { | |
| EventDisplayName: 'IOT', | |
| EventDate0: '2019-03-01T00:00:00', | |
| EventDate1: '2019-06-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'planning_later', | |
| }, | |
| ], | |
| }, | |
| { | |
| SliceTitle: 'Future Devices', | |
| RoadmapSliceEvents: [ | |
| { | |
| EventDisplayName: 'Smart Devices of 2025', | |
| EventDate0: '2018-02-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'delivered', | |
| }, | |
| { | |
| EventDisplayName: 'Drones', | |
| EventDate0: '2019-08-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'planning_now', | |
| }, | |
| ], | |
| }, | |
| { | |
| SliceTitle: 'AI Bytesize', | |
| RoadmapSliceEvents: [ | |
| { | |
| EventDisplayName: '"ML Gotcha"', | |
| EventDate0: '2018-09-01T00:00:00', | |
| EventRepresentationID: 420, | |
| type: 'delivered', | |
| }, | |
| ], | |
| }, | |
| ], | |
| }; | |
| const data2 = { | |
| RoadmapLayoutApproach: 'UpAndRight', | |
| DateStart: '2018-01-01T00:00:00', | |
| DurationSeconds: 31536000, | |
| RealitySetA: 1, | |
| RenderingPrintWidthCentimetres: 16, | |
| RenderingPrintHeightCentimetres: 9, | |
| ShowYAxis: true, | |
| ShowXAxis: true, | |
| AxisXScaleName: 'LinearTime', | |
| AxisXLabelling: 'auto', | |
| LegendEntries: [ | |
| { | |
| LegendConceptID: 420, | |
| LegendMeaningDisplayName: 'In Production', | |
| LegendMeaningDescription: null, | |
| PrimaryShapeName: 'circle', | |
| PrimaryShapeColourPrimary: '4080B0', | |
| PrimaryShapeColourSecondary: null, | |
| PrimaryShapeScale: 1, | |
| }, | |
| ], | |
| Slices: [ | |
| { | |
| SliceColourBackground: 'b0ffb0', | |
| RenderingOrderPriority: 100, | |
| RoadmapLayoutApproach: 'inherit', | |
| LabelLayoutApproach: 'inherit', | |
| RoadmapSliceEvents: [ | |
| { | |
| EventConceptID: 111, | |
| EventDisplayName: 'A First Roadmap Blob', | |
| EventDescriptionSecondaryText: | |
| 'first bullet point\r\nsecond bullet point\r\nthird bullet point', | |
| EventDescriptionMouseoverText: | |
| 'Some text that could show up onMouseOver', | |
| EventRepresentationID: 420, | |
| EventDate0: '2018-01-01T00:00:00', | |
| }, | |
| ], | |
| SliceTitle: 'Title of First Roadmap Slice goes here', | |
| }, | |
| ], | |
| RoadmapTitle: 'My Roadmap\u0027s Title', | |
| }; | |
| storiesOf('ResponsiveRoadmap', module) | |
| .addDecorator(withKnobs) | |
| .add('simple example', () => ( | |
| <div style={{ height: 400 }}> | |
| <ResponsiveRoadmap | |
| startDate={date('Start date', new Date(2018, 5, 0))} | |
| data={object('data', data)} | |
| onEventClick={action('event clicked')} | |
| onSliceClick={action('slice clicked')} | |
| /> | |
| </div> | |
| )) | |
| .add('single swimlane', () => ( | |
| <div style={{ height: 400 }}> | |
| <ResponsiveRoadmap | |
| startDate={date('Start date', new Date(2016, 5, 0))} | |
| data={object('data', data2)} | |
| onEventClick={action('event clicked')} | |
| onSliceClick={action('slice clicked')} | |
| /> | |
| </div> | |
| )); | |
| storiesOf('Roadmap', module) | |
| .addDecorator(withKnobs) | |
| .add('simple example', () => ( | |
| <div style={{ height: 400 }}> | |
| <Roadmap | |
| width={number('width', 400, { | |
| range: true, | |
| min: 0, | |
| max: 1000, | |
| step: 1, | |
| })} | |
| height={400} | |
| startDate={date('Start date', new Date(2018, 5, 0))} | |
| data={object('data', data)} | |
| onEventClick={action('event clicked')} | |
| onSliceClick={action('slice clicked')} | |
| /> | |
| </div> | |
| )) | |
| .add('single swimlane', () => ( | |
| <div style={{ height: 400 }}> | |
| <Roadmap | |
| width={400} | |
| height={400} | |
| startDate={date('Start date', new Date(2016, 5, 0))} | |
| data={object('data', data2)} | |
| onEventClick={action('event clicked')} | |
| onSliceClick={action('slice clicked')} | |
| /> | |
| </div> | |
| )); | |
| storiesOf('DataTable', module) | |
| .addDecorator(withKnobs) | |
| .add('simple example', () => ( | |
| <div style={{ height: 400 }}> | |
| <DataTable | |
| data={object('data', data)} | |
| onEventClick={action('event clicked')} | |
| onSliceClick={action('slice clicked')} | |
| /> | |
| </div> | |
| )); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment