@topkit/analytics-charts 1.1.4 → 1.1.5-alpha-fix-alpha-packages.2603

package/src/CategoriesChartTooltip/utils/get-display-texts/test.ts

@@ -1,81 +0,0 @@
-import getDisplayTexts, { GetDisplayTextsParams } from './get-display-texts'
-
-describe('getDisplayTexts', () => {
-  it('returns correct data', () => {
-    const INPUT: GetDisplayTextsParams = {
-      currentData: {
-        id: 'claimed',
-        values: [
-          {
-            id: 'team',
-            values: [
-              { id: 'viable', value: 252 },
-              { id: 'bad_leads', value: 0 },
-              { id: 'rejected', value: 11 }
-            ]
-          },
-          {
-            id: 'user',
-            values: [
-              { id: 'viable', value: 595 },
-              { id: 'bad_leads', value: 0 },
-              { id: 'rejected', value: 24 }
-            ]
-          }
-        ]
-      },
-      tooltips: {
-        claimed: {
-          team: {
-            viable: 'Team Viable Average',
-            bad_leads: 'Team Bad Leads (Unresponsive) Average',
-            rejected: 'Team Removed Average'
-          },
-          user: {
-            viable: 'Your Viable',
-            bad_leads: 'Your Bad Leads (Unresponsive)',
-            rejected: 'Your Removed'
-          }
-        }
-      },
-      currentPayload: {
-        team: 263,
-        user: 619,
-        name: 'claimed'
-      }
-    }
-
-    const OUTPUT = {
-      teamTexts: [
-        {
-          key: 'team-viable',
-          label: 'Team Viable Average',
-          value: 252,
-          color: '#204ecf'
-        },
-        {
-          key: 'team-rejected',
-          label: 'Team Removed Average',
-          value: 11,
-          color: '#204ecf'
-        }
-      ],
-      userTexts: [
-        {
-          key: 'user-viable',
-          label: 'Your Viable',
-          value: 595,
-          color: '#0f256e'
-        },
-        {
-          key: 'user-rejected',
-          label: 'Your Removed',
-          value: 24,
-          color: '#0f256e'
-        }
-      ]
-    }
-
-    expect(getDisplayTexts(INPUT)).toStrictEqual(OUTPUT)
-  })
-})

package/src/CategoriesChartTooltip/utils/index.ts

@@ -1 +0,0 @@
-export { default as getDisplayTexts } from './get-display-texts'

package/src/config.ts

@@ -1,3 +0,0 @@
-export const HOUR = 60
-export const DAY = HOUR * 24
-export const NUMBER_OF_Y_AXIS_TICKS = 4

package/src/index.ts

@@ -1,3 +0,0 @@
-export { default as AnalyticsChart } from './AnalyticsChart'
-export { default as CategoriesChart } from './CategoriesChart'
-export type { DataItem } from './CategoriesChart'

package/src/utils/format-y-axis-tick/format-y-axis-tick.ts

@@ -1,23 +0,0 @@
-import { HOUR, DAY } from '../../config'
-
-const formatYAxisTick = (
-  value: number,
-  domain: [number, number],
-  unit?: string
-) => {
-  if (unit === 'minutes') {
-    if (domain[1] >= DAY * 2) {
-      return Math.floor(value / DAY) + 'd'
-    }
-
-    if (domain[1] >= HOUR) {
-      return Math.floor(value / HOUR) + 'h'
-    }
-
-    return Math.floor(value) + 'm'
-  }
-
-  return `${value}`
-}
-
-export default formatYAxisTick

package/src/utils/format-y-axis-tick/index.ts

@@ -1 +0,0 @@
-export { default } from './format-y-axis-tick'

package/src/utils/format-y-axis-tick/test.ts

@@ -1,13 +0,0 @@
-import formatYAxisTick from './format-y-axis-tick'
-
-describe('formatYAxisTick', () => {
-  it('formats y axis ticks', () => {
-    expect(formatYAxisTick(3, [0, 1])).toBe('3')
-  })
-
-  it('formats y axis ticks with minutes unit', () => {
-    expect(formatYAxisTick(20, [0, 37], 'minutes')).toBe('20m')
-    expect(formatYAxisTick(120, [0, 140], 'minutes')).toBe('2h')
-    expect(formatYAxisTick(2880, [0, 5444], 'minutes')).toBe('2d')
-  })
-})

package/src/utils/generate-reference-key/generate-reference-key.ts

@@ -1,4 +0,0 @@
-const generateReferenceKey = (postfix: string | number) =>
-  `reference-${postfix}`
-
-export default generateReferenceKey

package/src/utils/generate-reference-key/index.ts

@@ -1 +0,0 @@
-export { default } from './generate-reference-key'

package/src/utils/get-x-axis-ticks/get-x-axis-ticks.ts

@@ -1,24 +0,0 @@
-import { OrderedChartDataPoint } from '@toptal/picasso-charts'
-
-import { ChartGranularity } from '../../AnalyticsChart'
-
-const getXAxisTicks = (
-  orderedData: OrderedChartDataPoint[],
-  granularity?: ChartGranularity
-) => {
-  if (granularity === 'day') {
-    return orderedData
-      .filter(({ order }) => order % 2 === 0)
-      .map(({ order }) => order)
-  }
-
-  if (granularity === 'hour') {
-    return orderedData
-      .filter(({ order }) => order % 2 !== 0)
-      .map(({ order }) => order)
-  }
-
-  return orderedData.map(({ order }) => order)
-}
-
-export default getXAxisTicks

package/src/utils/get-x-axis-ticks/index.ts

@@ -1 +0,0 @@
-export { default } from './get-x-axis-ticks'

package/src/utils/get-x-axis-ticks/test.ts

@@ -1,37 +0,0 @@
-import getXAxisTicks from './get-x-axis-ticks'
-
-const ORDERED_DATA = [
-  {
-    order: 0
-  },
-  {
-    order: 1
-  },
-  {
-    order: 2
-  },
-  {
-    order: 3
-  }
-]
-
-describe('getXAxisTicks', () => {
-  it('gets x axis ticks', () => {
-    const EXPECTED_TICKS = [0, 1, 2, 3]
-
-    expect(getXAxisTicks(ORDERED_DATA, 'week')).toEqual(EXPECTED_TICKS)
-    expect(getXAxisTicks(ORDERED_DATA)).toEqual(EXPECTED_TICKS)
-  })
-
-  it('gets x axis ticks for day granularity', () => {
-    const EXPECTED_TICKS = [0, 2]
-
-    expect(getXAxisTicks(ORDERED_DATA, 'day')).toEqual(EXPECTED_TICKS)
-  })
-
-  it('gets x axis ticks for hour granularity', () => {
-    const EXPECTED_TICKS = [1, 3]
-
-    expect(getXAxisTicks(ORDERED_DATA, 'hour')).toEqual(EXPECTED_TICKS)
-  })
-})

package/src/utils/get-y-axis-ticks/get-y-axis-ticks.ts

@@ -1,25 +0,0 @@
-import { scaleLinear } from 'd3'
-import { ticks } from 'd3-array'
-
-import { HOUR, DAY, NUMBER_OF_Y_AXIS_TICKS } from '../../config'
-
-const uniqBy = <T>(array: T[]) =>
-  array.filter((value, index, self) => self.indexOf(value) === index)
-
-const getYAxisTicks = (domain: [number, number], unit?: string) => {
-  if (unit === 'minutes') {
-    if (domain[1] >= HOUR) {
-      const interval = domain[1] >= DAY * 2 ? DAY : HOUR
-
-      const yAxisTicks = scaleLinear()
-        .domain([0, domain[1] / interval])
-        .ticks(4)
-
-      return uniqBy(yAxisTicks.map(Math.floor)).map(tick => tick * interval)
-    }
-  }
-
-  return ticks(domain[0], domain[1], NUMBER_OF_Y_AXIS_TICKS)
-}
-
-export default getYAxisTicks

package/src/utils/get-y-axis-ticks/index.ts

@@ -1 +0,0 @@
-export { default } from './get-y-axis-ticks'

package/src/utils/get-y-axis-ticks/test.ts

@@ -1,22 +0,0 @@
-import getYAxisTicks from './get-y-axis-ticks'
-
-const DOMAIN: [number, number] = [0, 37]
-
-describe('getYAxisTicks', () => {
-  it('gets y axis ticks', () => {
-    expect(getYAxisTicks(DOMAIN)).toStrictEqual([0, 10, 20, 30])
-  })
-
-  it('gets y axis ticks for minutes unit', () => {
-    expect(getYAxisTicks(DOMAIN, 'minutes')).toStrictEqual([0, 10, 20, 30])
-  })
-
-  it('gets y axis ticks for minutes unit that exceeds 1 hour', () => {
-    expect(getYAxisTicks([0, 5444], 'minutes')).toStrictEqual([
-      0,
-      1440,
-      2880,
-      4320
-    ])
-  })
-})

package/src/utils/index.ts

@@ -1,7 +0,0 @@
-export { default as toChartFormat } from './to-chart-format'
-export { default as toHighlightFormat } from './to-highlight-format'
-export { default as generateReferenceKey } from './generate-reference-key'
-export { default as toLineConfigFormat } from './to-line-config-format'
-export { default as getXAxisTicks } from './get-x-axis-ticks'
-export { default as getYAxisTicks } from './get-y-axis-ticks'
-export { default as formatYAxisTick } from './format-y-axis-tick'

package/src/utils/to-chart-format/index.ts

@@ -1 +0,0 @@
-export { default } from './to-chart-format'

package/src/utils/to-chart-format/test.ts

@@ -1,200 +0,0 @@
-import { format, parseISO } from 'date-fns'
-
-import toChartFormat from './'
-import generateReferenceKey from './../generate-reference-key'
-
-const RAW_CHART_DATA = [
-  {
-    id: 'projects',
-    values: {
-      '2020-10-20': 1.7,
-      '2020-10-21': 2,
-      '2020-10-22': 1.7,
-      '2020-10-23': 2,
-      '2020-10-24': 1.5,
-      '2020-10-25': 1.3
-    }
-  },
-  {
-    id: 'team',
-    values: {
-      '2020-10-20': 1.7,
-      '2020-10-21': 2,
-      '2020-10-22': 1.7,
-      '2020-10-23': 2,
-      '2020-10-24': 1.5,
-      '2020-10-25': 1.3
-    }
-  }
-]
-const X_AXIS_KEY = 'x'
-
-describe('toChartFormat', () => {
-  it('converts chart data', () => {
-    const EXPECTED_CHART_DATA = [
-      { x: '2020-10-20', projects: 1.7, team: 1.7 },
-      { x: '2020-10-21', projects: 2, team: 2 },
-      { x: '2020-10-22', projects: 1.7, team: 1.7 },
-      { x: '2020-10-23', projects: 2, team: 2 },
-      { x: '2020-10-24', projects: 1.5, team: 1.5 },
-      { x: '2020-10-25', projects: 1.3, team: 1.3 }
-    ]
-    const convertedChartData = toChartFormat(
-      RAW_CHART_DATA,
-      undefined,
-      X_AXIS_KEY,
-      label => label
-    )
-
-    expect(convertedChartData).toEqual(EXPECTED_CHART_DATA)
-  })
-
-  it('converts chart data with custom label format', () => {
-    const EXPECTED_CHART_DATA = [
-      { x: 'Oct 20', projects: 1.7, team: 1.7 },
-      { x: 'Oct 21', projects: 2, team: 2 },
-      { x: 'Oct 22', projects: 1.7, team: 1.7 },
-      { x: 'Oct 23', projects: 2, team: 2 },
-      { x: 'Oct 24', projects: 1.5, team: 1.5 },
-      { x: 'Oct 25', projects: 1.3, team: 1.3 }
-    ]
-    const convertedChartData = toChartFormat(
-      RAW_CHART_DATA,
-      undefined,
-      X_AXIS_KEY,
-      label => format(parseISO(label), 'MMM dd')
-    )
-
-    expect(convertedChartData).toEqual(EXPECTED_CHART_DATA)
-  })
-
-  it('converts chart data with null values', () => {
-    const CHART_DATA_WITH_NULLS = [
-      {
-        id: 'projects',
-        values: {
-          '2020-10-20': 1.7,
-          '2020-10-21': null,
-          '2020-10-22': null,
-          '2020-10-23': 2,
-          '2020-10-24': 1.5,
-          '2020-10-25': 1.3
-        }
-      },
-      {
-        id: 'team',
-        values: {
-          '2020-10-20': 1.7,
-          '2020-10-21': 2,
-          '2020-10-22': null,
-          '2020-10-23': 2,
-          '2020-10-24': null,
-          '2020-10-25': 1.3
-        }
-      }
-    ]
-
-    const EXPECTED_CHART_DATA = [
-      { x: '2020-10-20', projects: 1.7, team: 1.7 },
-      { x: '2020-10-21', projects: 0, team: 2, projectsIsEmpty: true },
-      {
-        x: '2020-10-22',
-        projects: 0,
-        team: 0,
-        projectsIsEmpty: true,
-        teamIsEmpty: true
-      },
-      { x: '2020-10-23', projects: 2, team: 2 },
-      { x: '2020-10-24', projects: 1.5, team: 0, teamIsEmpty: true },
-      { x: '2020-10-25', projects: 1.3, team: 1.3 }
-    ]
-
-    const convertedChartData = toChartFormat(
-      CHART_DATA_WITH_NULLS,
-      undefined,
-      X_AXIS_KEY,
-      label => label
-    )
-
-    expect(convertedChartData).toEqual(EXPECTED_CHART_DATA)
-  })
-
-  it('convertschart data with ref data', () => {
-    const REF_DATA = [
-      {
-        data: {
-          '2020-10-20': 1.7,
-          '2020-10-21': 2,
-          '2020-10-22': 1.7,
-          '2020-10-23': 2,
-          '2020-10-24': 1.5,
-          '2020-10-25': 1.3
-        },
-        color: 'red'
-      },
-      {
-        data: {
-          '2020-10-20': 1.7,
-          '2020-10-21': 2,
-          '2020-10-22': 1.7,
-          '2020-10-23': 2,
-          '2020-10-24': 1.5,
-          '2020-10-25': 1.3
-        },
-        color: 'blue'
-      }
-    ]
-    const EXPECTED_CHART_DATA = [
-      {
-        x: '2020-10-20',
-        [generateReferenceKey(0)]: 1.7,
-        [generateReferenceKey(1)]: 1.7,
-        projects: 1.7,
-        team: 1.7
-      },
-      {
-        x: '2020-10-21',
-        [generateReferenceKey(0)]: 2,
-        [generateReferenceKey(1)]: 2,
-        projects: 2,
-        team: 2
-      },
-      {
-        x: '2020-10-22',
-        [generateReferenceKey(0)]: 1.7,
-        [generateReferenceKey(1)]: 1.7,
-        projects: 1.7,
-        team: 1.7
-      },
-      {
-        x: '2020-10-23',
-        [generateReferenceKey(0)]: 2,
-        [generateReferenceKey(1)]: 2,
-        projects: 2,
-        team: 2
-      },
-      {
-        x: '2020-10-24',
-        [generateReferenceKey(0)]: 1.5,
-        [generateReferenceKey(1)]: 1.5,
-        projects: 1.5,
-        team: 1.5
-      },
-      {
-        x: '2020-10-25',
-        [generateReferenceKey(0)]: 1.3,
-        [generateReferenceKey(1)]: 1.3,
-        projects: 1.3,
-        team: 1.3
-      }
-    ]
-    const convertedChartData = toChartFormat(
-      RAW_CHART_DATA,
-      REF_DATA,
-      X_AXIS_KEY,
-      label => label
-    )
-
-    expect(convertedChartData).toEqual(EXPECTED_CHART_DATA)
-  })
-})

package/src/utils/to-chart-format/to-chart-format.ts

@@ -1,60 +0,0 @@
-import { ChartDataPoint } from '@toptal/picasso-charts'
-
-import { Point, ReferenceLine } from './../../AnalyticsChart'
-import generateReferenceKey from '../generate-reference-key'
-
-const toChartFormat = (
-  data: Point[],
-  referenceLines: ReferenceLine[] | undefined,
-  xAxisKey: string,
-  formatLabel: (label: string) => string
-) => {
-  const formattedData: ChartDataPoint[] = []
-  const decoratePointWithRefData = (point: ChartDataPoint, dataKey: string) =>
-    referenceLines?.reduce((point, { data }, index) => {
-      point[generateReferenceKey(index)] = data[dataKey]
-
-      return point
-    }, point) || point
-
-  data.forEach(({ id, values }) => {
-    Object.entries(values).forEach(([key, value]) => {
-      const label = formatLabel(key)
-      const isEmptyValue = value === null
-      const nonNullValue = value === null ? 0 : value
-
-      const existingItem = formattedData.find(
-        ({ [xAxisKey]: existingLabel }) => existingLabel === label
-      )
-
-      if (existingItem) {
-        existingItem[id] = nonNullValue
-        if (isEmptyValue) {
-          existingItem[`${id}IsEmpty`] = true
-        }
-
-        return
-      }
-
-      const dataPoint: ChartDataPoint = {
-        [xAxisKey]: label,
-        [id]: nonNullValue
-      }
-
-      // We indicate that value is empty for particular data set with the special flag.
-      // Since single ChartDataPoint may contain values from multiple data sets, we'll may also have multiple number of flags.
-      // Setting those flags will make this information available inside tooltips and other custom elements.
-      // Please refer to this example for more details:
-      // http://picasso.toptal.net/?path=/story/charts-folder--analyticschart#null-values
-      if (isEmptyValue) {
-        dataPoint[`${id}IsEmpty`] = true
-      }
-
-      formattedData.push(decoratePointWithRefData(dataPoint, key))
-    })
-  })
-
-  return formattedData
-}
-
-export default toChartFormat

package/src/utils/to-highlight-format/index.ts

@@ -1 +0,0 @@
-export { default } from './to-highlight-format'

package/src/utils/to-highlight-format/test.ts

@@ -1,56 +0,0 @@
-import { format, parseISO } from 'date-fns'
-
-import toHighlightFormat from './'
-
-const HIGHLIGHTS = [
-  {
-    data: ['2020-11-01', '2020-11-04'],
-    color: 'red'
-  }
-]
-
-const X_AXIS_KEY = 'x'
-
-describe('toHighlightFormat', () => {
-  it('converts highlight data', () => {
-    const CHART_DATA = [
-      { x: '2020-11-01', test: 2 },
-      { x: '2020-11-02', test: 1.5 },
-      { x: '2020-11-03', test: 1.3 },
-      { x: '2020-11-04', test: 1.5 },
-      { x: '2020-11-05', test: 1.5 }
-    ]
-    const convertedHighlightsData = toHighlightFormat(
-      CHART_DATA,
-      HIGHLIGHTS,
-      X_AXIS_KEY,
-      label => label
-    )
-
-    expect(convertedHighlightsData).toEqual([
-      { color: 'red', from: 0, to: 1 },
-      { color: 'red', from: 3, to: 4 }
-    ])
-  })
-
-  it('converts highlight data with label format', () => {
-    const CHART_DATA = [
-      { x: 'Nov 01', test: 2 },
-      { x: 'Nov 02', test: 1.5 },
-      { x: 'Nov 03', test: 1.3 },
-      { x: 'Nov 04', test: 1.5 },
-      { x: 'Nov 05', test: 1.5 }
-    ]
-    const convertedHighlightsData = toHighlightFormat(
-      CHART_DATA,
-      HIGHLIGHTS,
-      X_AXIS_KEY,
-      (label: string) => format(parseISO(label), 'MMM dd')
-    )
-
-    expect(convertedHighlightsData).toEqual([
-      { color: 'red', from: 0, to: 1 },
-      { color: 'red', from: 3, to: 4 }
-    ])
-  })
-})

package/src/utils/to-highlight-format/to-highlight-format.ts

@@ -1,26 +0,0 @@
-import { ChartDataPoint, HighlightConfig } from '@toptal/picasso-charts'
-
-import { Highlight } from './../../AnalyticsChart'
-
-const HIGHLIGHT_LENGTH = 1
-
-const toHighlightFormat = (
-  chartData: ChartDataPoint[],
-  highlights: Highlight[],
-  xAxisKey: string,
-  formatLabel: (label: string) => string
-): HighlightConfig[] =>
-  highlights
-    .map(({ data, color }) => data.map(section => ({ section, color })))
-    .flat()
-    .map(({ section, color }) => {
-      const formattedSection = formatLabel(section)
-      const from = chartData.findIndex(
-        point => point[xAxisKey] === formattedSection
-      )
-      const to = from + HIGHLIGHT_LENGTH
-
-      return { from, to, color }
-    })
-
-export default toHighlightFormat

package/src/utils/to-line-config-format/index.ts

@@ -1 +0,0 @@
-export { default } from './to-line-config-format'

package/src/utils/to-line-config-format/test.ts

@@ -1,50 +0,0 @@
-import { LineConfig } from '@toptal/picasso-charts'
-
-import generateReferenceKey from './../generate-reference-key'
-import toLineConfigFormat from './'
-
-const LINE_CONFIG: LineConfig = {
-  team: {
-    color: 'orange',
-    variant: 'solid'
-  }
-}
-
-const REF_DATA = [
-  {
-    data: {
-      '2020-10-20': 1.7,
-      '2020-10-21': 2,
-      '2020-10-22': 1.7,
-      '2020-10-23': 2,
-      '2020-10-24': 1.5,
-      '2020-10-25': 1.3
-    },
-    color: 'red'
-  },
-  {
-    data: {
-      '2020-10-20': 1.7,
-      '2020-10-21': 2,
-      '2020-10-22': 1.7,
-      '2020-10-23': 2,
-      '2020-10-24': 1.5,
-      '2020-10-25': 1.3
-    },
-    color: 'blue'
-  }
-]
-
-describe('Name of the group', () => {
-  it('convertsline config', () => {
-    const EXPECTED_LINE_CONFIG = {
-      ...LINE_CONFIG,
-      [generateReferenceKey(0)]: { color: 'red', variant: 'reference' },
-      [generateReferenceKey(1)]: { color: 'blue', variant: 'reference' }
-    }
-
-    const convertedLineConfig = toLineConfigFormat(LINE_CONFIG, REF_DATA)
-
-    expect(convertedLineConfig).toEqual(EXPECTED_LINE_CONFIG)
-  })
-})