refactor(chartcontainer): ♻️ move to typescript

results/src/core/blocks/generic/VerticalBarBlock.tsx

@@ -7,19 +7,18 @@ import VerticalBarChart from 'core/charts/generic/VerticalBarChart'
 import { usePageContext } from 'core/helpers/pageContext'
 import { useLegends } from 'core/helpers/useBucketKeys'
 // import T from 'core/i18n/T'
-import { FacetItem, BlockComponentProps } from 'core/types'
+import { BlockComponentProps, ResultsByYear } from 'core/types'
 import { getTableData } from 'core/helpers/datatables'
 
 export interface VerticalBarBlockProps extends BlockComponentProps {
-    data: FacetItem
+    data: ResultsByYear
 }
 
 const VerticalBarBlock = ({ block, data, keys }: VerticalBarBlockProps) => {
     if (!data) {
         throw new Error(`VerticalBarBlock: Missing data for block ${block.id}.`)
     }
     const {
-        // id,
         mode = 'relative',
         defaultUnits = 'percentage_survey',
         translateData,
@@ -52,7 +51,7 @@ const VerticalBarBlock = ({ block, data, keys }: VerticalBarBlockProps) => {
             completion={completion}
             data={data}
             block={block}
-            legendProps={{ layout: 'vertical' }}
+            legendProps={{ layout: 'horizontal' }} // unsure if this is used?
         >
             <ChartContainer fit={true}>
                 <VerticalBarChart

results/src/core/charts/ChartContainer.js → results/src/core/charts/ChartContainer.tsx

@@ -1,9 +1,22 @@
-import React, { memo } from 'react'
-import PropTypes from 'prop-types'
+import React, { memo, ReactNode } from 'react'
 import styled from 'styled-components'
 import { mq, spacing } from 'core/theme'
 
-const Indicator = memo(({ position }) => (
+type PositionProp = 'top' | 'right' | 'bottom' | 'left'
+
+interface IndicatorProps {
+    position: PositionProp
+}
+
+interface ChartContainerProps {
+    children: ReactNode
+    height?: string | number
+    className?: string
+    fit?: boolean
+    vscroll?: boolean
+}
+
+const Indicator = memo(({ position }: IndicatorProps) => (
     <ChartContainerIndicator
         position={position}
         className={`ChartContainerIndicator ChartContainerIndicator--${position}`}
@@ -36,12 +49,19 @@ const Indicator = memo(({ position }) => (
         </svg>
     </ChartContainerIndicator>
 ))
+Indicator.displayName = 'Indicator'
 
 /**
  * - Fit: fit to viewport width
  * - Expand: force a 600px width
  */
-const ChartContainer = ({ children, height, fit = false, className = '', vscroll = false }) => (
+const ChartContainer = ({
+    children,
+    height,
+    fit = false,
+    className = '',
+    vscroll = false
+}: ChartContainerProps) => (
     <ChartContainerOuter className={`ChartContainerOuter ${className}`} style={{ height }}>
         <Container className="ChartContainer" style={{ height }}>
             <ChartContainerInner
@@ -66,13 +86,6 @@ const ChartContainer = ({ children, height, fit = false, className = '', vscroll
     </ChartContainerOuter>
 )
 
-ChartContainer.propTypes = {
-    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    fit: PropTypes.bool,
-    className: PropTypes.string,
-    vscroll: PropTypes.bool,
-}
-
 const ChartContainerOuter = styled.div`
     position: relative;
 `
@@ -87,16 +100,16 @@ const Container = styled.div`
     }
 
     .FeatureExperienceBlock__RowChart & {
-      @media ${mq.smallMedium} {
-          overflow-x: visible;
-      }
+        @media ${mq.smallMedium} {
+            overflow-x: visible;
+        }
     }
 `
 
 const ChartContainerInner = styled.div`
     &.ChartContainerInner--expand {
         @media ${mq.small} {
-          min-width:500px;
+            min-width: 500px;
         }
         @media ${mq.medium} {
             max-width: auto;
@@ -106,7 +119,7 @@ const ChartContainerInner = styled.div`
     }
 `
 
-const ChartContainerIndicator = styled.span`
+const ChartContainerIndicator = styled.span<IndicatorProps>`
     position: absolute;
     display: flex;
     justify-content: center;

results/src/core/types/block.ts

@@ -1,7 +1,8 @@
-import React, { FC } from 'react'
+import React, { ReactNode } from 'react'
+import { ColorVariant, ResultsByYear, YearCompletion } from '.'
 
 export type BlockUnits = 'count' | 'percentage_survey' | 'percentage_question' | 'percentage_facet'
-export type BlockSetUnits = React.Dispatch<React.SetStateAction<string>>
+export type BlockSetUnits = React.Dispatch<React.SetStateAction<BlockUnits>>
 export type BlockMode = 'absolute' | 'relative'
 
 export interface BlockComponentProps {
@@ -21,7 +22,7 @@ export interface BlockDefinition {
     mode?: BlockMode
     blockNamespace?: string
     chartNamespace?: string
-    colorVariant?: string
+    colorVariant?: ColorVariant
     overrides?: object
 
     // data
@@ -38,18 +39,20 @@ export interface BlockDefinition {
 }
 
 export interface BlockVariantProps {
-    id: string
-    className: string
-    children: FC
+    id?: string
+    className?: string
+    children: ReactNode
     units: BlockUnits
     setUnits: BlockSetUnits
     block: BlockDefinition
+    completion: YearCompletion
+    data: ResultsByYear
+    // tables have the type of TableData but as it is being returned form a fn I'm unsure on how to do this in TS
+    tables: unknown
+    legendProps: unknown // is this used at all?
     // error,
-    // data,
-    // legendProps,
     // titleProps,
     // headings,
-    // tables,
 }
 
 export interface BlockLegend {

results/src/core/types/chart.ts

@@ -1,28 +1,29 @@
 import { BlockMode, BlockUnits, BlockLegend } from './block'
 import { Entity } from './data'
 
+export type ColorVariant = 'primary' | 'secondary'
 export interface ChartComponentProps {
-  viewportWidth?: number
-  className?: string
-  bucketKeys?: BlockLegend[]
-  total?: number
-  i18nNamespace: string
-  translateData?: boolean
-  mode: BlockMode
-  units: BlockUnits
-  chartProps?: any
-  colorVariant?: 'primary' | 'secondary',
-  // 'buckets' is declared by chart
+    viewportWidth?: number
+    className?: string
+    bucketKeys?: BlockLegend[]
+    total?: number
+    i18nNamespace: string
+    translateData?: boolean
+    mode: BlockMode
+    units: BlockUnits
+    chartProps?: any
+    colorVariant?: ColorVariant
+    // 'buckets' is declared by chart
 }
 
 export interface TickItemProps {
-  x: number
-  y: number
-  id?: string | number
-  value?: string | number
-  shouldTranslate: boolean
-  i18nNamespace: string
-  entity: Entity
-  tickRotation?: number
-  description?: string
-}
+    x: number
+    y: number
+    id?: string | number
+    value?: string | number
+    shouldTranslate: boolean
+    i18nNamespace: string
+    entity: Entity
+    tickRotation?: number
+    description?: string
+}