#3172: Add year layout function, chart component

client/src/components/Chart.js

@@ -0,0 +1,26 @@
+import useLayout from "layouts/useLayout"
+import PropTypes from "prop-types"
+import React from "react"
+
+const Chart = ({ items, layoutType, element: Element }) => {
+  const [ref, layout] = useLayout(layoutType)
+
+  return (
+    <svg ref={ref}>
+      {items.map(item => (
+        <g
+          transform={`translate(${layout(item).x}, ${layout(item).y})`}
+          key={item.id}
+        >
+          <Element item={item} />
+        </g>
+      ))}
+    </svg>
+  )
+}
+Chart.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object),
+  layoutType: PropTypes.func,
+  element: PropTypes.node
+}
+export default Chart

client/src/components/aggregations/HeatWidget.js

@@ -0,0 +1,10 @@
+import PropTypes from "prop-types"
+import React from "react"
+
+const HeatWidget = ({ item }) => {
+  return <rect>{item}</rect>
+}
+HeatWidget.propTypes = {
+  item: PropTypes.object
+}
+export default HeatWidget

client/src/layouts.js

@@ -0,0 +1,9 @@
+export yearLayout from "layouts/yearLayout"
+export monthLayout from "layouts/monthLayout"
+export geoLayout from "layouts/geoLayout"
+
+export const TYPES = {
+  YEAR: "year",
+  MONTH: "month",
+  GEO: "geo"
+}

client/src/layouts/geoLayout.js

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types"
+import React from "react"
+
+const geoLayout = ({ item, dimensions }) => {
+  return (
+    <>
+      Hello {item} {dimensions}
+    </>
+  )
+}
+geoLayout.propTypes = {
+  item: PropTypes.object,
+  dimensions: PropTypes.object
+}
+export default geoLayout

client/src/layouts/monthLayout.js

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types"
+import React from "react"
+
+const monthLayout = ({ item, dimensions }) => {
+  return (
+    <>
+      Hello {item} {dimensions}
+    </>
+  )
+}
+monthLayout.propTypes = {
+  item: PropTypes.object,
+  dimensions: PropTypes.object
+}
+export default monthLayout

client/src/layouts/useLayout.js

@@ -0,0 +1,32 @@
+import * as layouts from "layouts"
+import { useMemo } from "react"
+import useDimensions from "react-use-dimensions"
+
+const useLayout = ({ layoutType }) => {
+  const [ref, dimensions] = useDimensions()
+  const layout = useMemo(
+    item => {
+      let layoutTemp
+      switch (layoutType) {
+        case layouts.TYPES.YEAR:
+          layoutTemp = layouts.yearLayout
+          break
+        case layouts.TYPES.MONTH:
+          layoutTemp = layouts.monthLayout
+          break
+        case layouts.TYPES.GEO:
+          layoutTemp = layouts.geoLayout
+          break
+        default:
+          layoutTemp = layouts.yearLayout
+          break
+      }
+      return layoutTemp(item, dimensions)
+    },
+    [layoutType, dimensions]
+  )
+
+  return [ref, layout]
+}
+
+export default useLayout

client/src/layouts/yearLayout.js

@@ -0,0 +1,29 @@
+import moment from "moment"
+
+const yearLayout = ({ item, dimensions }) => {
+  // figure out which year input is
+  // figure out where the item located according to its day
+  // calculate the how much x-y translation
+  const momentDate = moment(item.date)
+  // this day is basically [0,0] coordinates of the chart
+  const firstDayOfFirstWeekofTheYear = momentDate
+    .startOf("year")
+    .startOf("isoWeek")
+
+  const endOfYear = momentDate.endOf("year")
+  const numOfWeeks = endOfYear.diff(firstDayOfFirstWeekofTheYear, "weeks") + 1
+  const diff = momentDate.diff(firstDayOfFirstWeekofTheYear, "days")
+
+  const weekDiff = Math.floor(diff / 7)
+
+  const weekDayDiff = diff % 7
+
+  return {
+    xPos: (dimensions.width * weekDiff) / numOfWeeks,
+    yPos: (dimensions.height * weekDayDiff) / 7,
+    width: dimensions.width / numOfWeeks,
+    height: dimensions.height / 7
+  }
+}
+
+export default yearLayout