From d2de40ce7e60f295cd744f2cf6a6ca609516544a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cemalettin=20Ta=C5=9F?= Date: Mon, 21 Sep 2020 09:44:51 +0300 Subject: [PATCH] NCI-Agency/anet#3172: Add widget config props, refactor --- client/src/components/Chart.js | 10 ++++--- client/src/components/DateChart.js | 16 +++++++---- client/src/components/HeatMap.js | 10 ++++++- .../src/components/aggregations/HeatWidget.js | 26 +++++++++++++----- client/src/components/aggregations/utils.js | 27 +++++++++++++++++++ client/src/layouts/geoLayout.js | 2 +- 6 files changed, 73 insertions(+), 18 deletions(-) diff --git a/client/src/components/Chart.js b/client/src/components/Chart.js index 247383a211..6cb81f30df 100644 --- a/client/src/components/Chart.js +++ b/client/src/components/Chart.js @@ -3,7 +3,7 @@ import { LAYOUT_AGGREGATORS } from "layouts/utils" import PropTypes from "prop-types" import React from "react" -const Chart = ({ items, layoutType, element: Element, style }) => { +const Chart = ({ items, layoutType, widgetElement, widgetConfig, style }) => { const aggregator = LAYOUT_AGGREGATORS[layoutType] const [aggregatedItems, aggregationKey] = aggregator(items) const [ChartElement, layout, initViewState, ref] = useLayout( @@ -16,8 +16,9 @@ const Chart = ({ items, layoutType, element: Element, style }) => { ) @@ -25,7 +26,8 @@ const Chart = ({ items, layoutType, element: Element, style }) => { Chart.propTypes = { items: PropTypes.arrayOf(PropTypes.object), layoutType: PropTypes.string, - element: PropTypes.func, - style: PropTypes.object + widgetElement: PropTypes.func, + style: PropTypes.object, + widgetConfig: PropTypes.object } export default Chart diff --git a/client/src/components/DateChart.js b/client/src/components/DateChart.js index 3d326a6741..65c568f486 100644 --- a/client/src/components/DateChart.js +++ b/client/src/components/DateChart.js @@ -4,8 +4,9 @@ import React from "react" const DateChart = ({ items, layout, - element: Element, - initViewState: viewDate + widgetElement: Widget, + initViewState: viewDate, + widgetConfig }) => { return ( <> @@ -20,7 +21,11 @@ const DateChart = ({ transform={`translate(${boundingRect.x}, ${boundingRect.y})`} key={item[item.aggregationKey]} > - + ) })} @@ -29,8 +34,9 @@ const DateChart = ({ } DateChart.propTypes = { items: PropTypes.arrayOf(PropTypes.object), - element: PropTypes.func, + widgetElement: PropTypes.func, layout: PropTypes.func, - initViewState: PropTypes.object + initViewState: PropTypes.object, + widgetConfig: PropTypes.object } export default DateChart diff --git a/client/src/components/HeatMap.js b/client/src/components/HeatMap.js index 3f8fe3b616..e4f6a3f66c 100644 --- a/client/src/components/HeatMap.js +++ b/client/src/components/HeatMap.js @@ -4,6 +4,13 @@ import { LAYOUT_TYPES } from "layouts/utils" import PropTypes from "prop-types" import React, { useState } from "react" +// TODO: this config can come from layouts/utils or be input to HeatMap or input from user +const heatConfig = { + low: 3, + mid: 6, + bgColor: "white", + textColor: "black" +} const HeatMap = ({ items, style }) => { const [layout, setLayout] = useState(LAYOUT_TYPES.YEAR) return ( @@ -25,8 +32,9 @@ const HeatMap = ({ items, style }) => { ) diff --git a/client/src/components/aggregations/HeatWidget.js b/client/src/components/aggregations/HeatWidget.js index 7368a6da50..68014474f9 100644 --- a/client/src/components/aggregations/HeatWidget.js +++ b/client/src/components/aggregations/HeatWidget.js @@ -1,23 +1,34 @@ +import { numOfEventsToHeatBgc } from "components/aggregations/utils" import PropTypes from "prop-types" import React from "react" + // TODO: add color scales -const HeatWidget = ({ item, dimensions }) => { +// TODO: api will probably change +/** + * @param {object} item - aggregated item in the shape {aggregationKey: string, [aggregationKey]: object, numOfEvents: number} + * @param {object} dimensions - what view types you want to use + * @param {object} heatConfig - object in the form {low:number, mid:number, bgColor:string, textColor: string} + * 4 levels of tone for event count: if = 0, if <= low, if <= mid, if > mid + */ +const HeatWidget = ({ item, dimensions, widgetConfig: heatConfig }) => { + const bgc = numOfEventsToHeatBgc(item.numOfEvents, heatConfig) + console.log(item, heatConfig) + return ( <> {item.numOfEvents} @@ -27,6 +38,7 @@ const HeatWidget = ({ item, dimensions }) => { } HeatWidget.propTypes = { item: PropTypes.object, - dimensions: PropTypes.object + dimensions: PropTypes.object, + widgetConfig: PropTypes.object } export default HeatWidget diff --git a/client/src/components/aggregations/utils.js b/client/src/components/aggregations/utils.js index c31ade1df3..31741d297b 100644 --- a/client/src/components/aggregations/utils.js +++ b/client/src/components/aggregations/utils.js @@ -220,3 +220,30 @@ export function reportsToEvents(reports) { } }) } +export const COLOR_NAMES_TO_RGB = { + red: "rgb(155, 0, 0, ", + blue: "rgb(0, 0, 155, ", + green: "rgb(0, 155, 0, ", + pink: "rgb(194, 31, 169, ", + orange: "rgb(199, 135, 6, ", + white: "rgb(255, 255, 255, ", + brown: "rgb(128, 57, 30, " +} + +/** + * There are 4 levels, [none, low, mid, high], none=0 assumed, we need two values: low, mid + * Available colors ["red", "blue", "green", "pink", "orange", "brown"] + * @param {number} numOfEvents - number of items to scale + * @param {object} scale - example object: {low: 3, mid: 6, bgColor: "red"} + */ +export function numOfEventsToHeatBgc(numOfEvents, scale) { + if (numOfEvents === 0) { + return "transparent" + } else if (numOfEvents <= scale.low) { + return `${COLOR_NAMES_TO_RGB[scale.bgColor]}0.25)` + } else if (numOfEvents <= scale.mid) { + return `${COLOR_NAMES_TO_RGB[scale.bgColor]}0.5)` + } else { + return `${COLOR_NAMES_TO_RGB[scale.bgColor]}1.0)` + } +} diff --git a/client/src/layouts/geoLayout.js b/client/src/layouts/geoLayout.js index 379eeffcdc..31c3166c31 100644 --- a/client/src/layouts/geoLayout.js +++ b/client/src/layouts/geoLayout.js @@ -1,4 +1,4 @@ -const geoLayout = (item, dimensions) => { +const geoLayout = (item, dimensions, viewLocation) => { // FIXME: do something useful instead return { x: 0,