Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#3172: Add widget config props, refactor
Browse files Browse the repository at this point in the history
cemalettin-work committed Oct 14, 2020
1 parent e2a22e7 commit d2de40c
Showing 6 changed files with 73 additions and 18 deletions.
10 changes: 6 additions & 4 deletions client/src/components/Chart.js
Original file line number Diff line number Diff line change
@@ -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,16 +16,18 @@ const Chart = ({ items, layoutType, element: Element, style }) => {
<ChartElement
items={aggregatedItems}
layout={layout}
element={Element}
widgetElement={widgetElement}
initViewState={initViewState}
widgetConfig={widgetConfig}
/>
</svg>
)
}
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
16 changes: 11 additions & 5 deletions client/src/components/DateChart.js
Original file line number Diff line number Diff line change
@@ -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]}
>
<Element item={item} dimensions={boundingRect} />
<Widget
item={item}
dimensions={boundingRect}
widgetConfig={widgetConfig}
/>
</g>
)
})}
@@ -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
10 changes: 9 additions & 1 deletion client/src/components/HeatMap.js
Original file line number Diff line number Diff line change
@@ -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 }) => {
<Chart
items={items}
layoutType={layout}
element={HeatWidget}
widgetElement={HeatWidget}
style={style}
widgetConfig={heatConfig}
/>
</div>
)
26 changes: 19 additions & 7 deletions client/src/components/aggregations/HeatWidget.js
Original file line number Diff line number Diff line change
@@ -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 (
<>
<rect
width={dimensions.width}
height={dimensions.height}
stroke="#aaa"
stroke="purple"
strokeWidth="2"
fill="#fff"
fill={bgc}
/>
<text
x={dimensions.width / 2}
y={dimensions.height / 2}
dominantBaseline="middle"
fontSize="12"
strokeWidth="0"
stroke="#000"
fontSize="16"
fill={heatConfig.textColor}
textAnchor="middle"
>
{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
27 changes: 27 additions & 0 deletions client/src/components/aggregations/utils.js
Original file line number Diff line number Diff line change
@@ -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)`
}
}
2 changes: 1 addition & 1 deletion client/src/layouts/geoLayout.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const geoLayout = (item, dimensions) => {
const geoLayout = (item, dimensions, viewLocation) => {
// FIXME: do something useful instead
return {
x: 0,

0 comments on commit d2de40c

Please sign in to comment.