Create a generic chart lens and use it for pull requests

Change-type: patch
Signed-off-by: Lucian Buzzo <[email protected]>

apps/server/default-cards/contrib/view-all-pull-requests.json

@@ -29,7 +29,7 @@
     "lenses": [
       "lens-list",
       "lens-kanban",
-      "lens-pull-request-chart"
+      "lens-chart"
     ]
   },
   "requires": [],

apps/ui/lens/index.js

@@ -19,7 +19,7 @@ import Kanban from './misc/Kanban'
 import SupportAuditChart from './misc/SupportAuditChart'
 import Table from './misc/Table'
 import CRMTable from './misc/CRMTable'
-import PullRequestChart from './misc/PullRequestChart'
+import Chart from './misc/Chart'
 
 import FullLenses from './full'
 import ListLenses from './list'
@@ -36,7 +36,7 @@ const lenses = {
 		SupportAuditChart,
 		Table,
 		CRMTable,
-		PullRequestChart
+		Chart
 	]
 }
 

apps/ui/lens/misc/Chart/Chart.jsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) Balena.io - All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited.
+ * Proprietary and confidential.
+ */
+
+import * as _ from 'lodash'
+import React, {
+	useState
+} from 'react'
+import plotly from 'plotly.js/dist/plotly'
+import PlotlyEditor from 'react-chart-editor'
+import 'react-chart-editor/lib/react-chart-editor.css'
+import * as flatten from 'flat'
+import {
+	createGlobalStyle
+} from 'styled-components'
+
+// The plotly styles don't render 100% correctly on JF, causing the panel
+// headers to get squashed. This fixes the issue
+const GlobalStyle = createGlobalStyle `
+	.plotly_editor .editor_controls .fold__top {
+			height: 30px;
+	}
+`
+
+export default React.memo((props) => {
+	// Flatten all the cards into single level objects so that plotly can handle
+	// the data
+	const flattenedData = _.map(props.tail, flatten)
+	const combinedFlatKeys = _.uniq(_.flatMap(flattenedData, _.keys))
+
+	const dataSources = _.mapValues(_.keyBy(combinedFlatKeys), (key) => _.map(flattenedData, key))
+
+	const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+		value: name,
+		label: name
+	}))
+
+	const [ settings, setSettings ] = useState({
+		data: [
+			// This config sets up a simple histogram that groups data by day, using
+			// the `created_at` field.
+			{
+				type: 'histogram',
+				mode: 'markers',
+				xsrc: 'created_at',
+				// eslint-disable-next-line
+				x: dataSources.created_at,
+				xbins: {
+					size: 86400000
+				},
+				marker: {
+					color: 'rgb(0, 174, 239)'
+				}
+			}
+		],
+		layout: {
+			bargap: 0.09
+		},
+		frames: []
+	})
+
+	const config = {
+		editable: true
+	}
+
+	return (
+		<React.Fragment>
+			<GlobalStyle />
+
+			<PlotlyEditor
+				data={settings.data}
+				layout={settings.layout}
+				config={config}
+				frames={settings.frame}
+				dataSources={dataSources}
+				dataSourceOptions={dataSourceOptions}
+				plotly={plotly}
+				onUpdate={(data, layout, frames) => {
+					console.log({
+						data, layout, frames
+					})
+					setSettings({
+						data,
+						layout,
+						frames
+					})
+				}}
+				useResizeHandler
+				debug
+				advancedTraceTypeSelector
+			/>
+		</React.Fragment>
+	)
+})

apps/ui/lens/misc/PullRequestChart/index.jsx → apps/ui/lens/misc/Chart/index.jsx

@@ -13,7 +13,7 @@ import {
 	actionCreators,
 	selectors
 } from '../../../core'
-import PullRequestChart from './PullRequestChart'
+import Chart from './Chart'
 
 const mapStateToProps = (state, ownProps) => {
 	return {
@@ -33,14 +33,14 @@ const mapDispatchToProps = (dispatch) => {
 }
 
 const lens = {
-	slug: 'lens-pull-request-chart',
+	slug: 'lens-chart',
 	type: 'lens',
 	version: '1.0.0',
-	name: 'Pull request chart lens',
+	name: 'Generic chart lens',
 	data: {
 		icon: 'chart-bar',
 		format: 'list',
-		renderer: connect(mapStateToProps, mapDispatchToProps)(PullRequestChart),
+		renderer: connect(mapStateToProps, mapDispatchToProps)(Chart),
 		filter: {
 			type: 'array',
 			items: {

apps/ui/lens/misc/PullRequestChart/tests/PullRequestChart.spec.jsx → apps/ui/lens/misc/Chart/tests/Chart.spec.jsx

@@ -15,7 +15,7 @@ import React from 'react'
 import {
 	Provider
 } from 'rendition'
-import PullRequestChart from '../PullRequestChart'
+import Chart from '../Chart'
 import sampleData from './cards.json'
 
 const browserEnv = require('browser-env')
@@ -30,7 +30,7 @@ ava('It should render', (test) => {
 
 	test.notThrows(() => {
 		shallow(
-			<PullRequestChart tail={tail} />
+			<Chart tail={tail} />
 		)
 	})
 })
@@ -40,7 +40,7 @@ ava('It should use a canvas tag to render a chart', (test) => {
 
 	const component = mount(
 		<Provider>
-			<PullRequestChart tail={tail} />
+			<Chart tail={tail} />
 		</Provider>
 	)