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

package/src/CategoriesChart/story/Default.example.tsx

@@ -1,234 +0,0 @@
-import React from 'react'
-import { DataItem, CategoriesChart } from '@topkit/analytics-charts'
-
-const CHART_DATA: DataItem[] = [
-  {
-    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
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'contacted',
-    values: [
-      {
-        id: 'team',
-        values: [
-          {
-            id: 'contacted',
-            value: 189
-          }
-        ]
-      },
-      {
-        id: 'user',
-        values: [
-          {
-            id: 'contacted',
-            value: 421
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'approved',
-    values: [
-      {
-        id: 'team',
-        values: [
-          {
-            id: 'approved',
-            value: 29
-          }
-        ]
-      },
-      {
-        id: 'user',
-        values: [
-          {
-            id: 'approved',
-            value: 27
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'verified',
-    values: [
-      {
-        id: 'team',
-        values: [
-          {
-            id: 'verified',
-            value: 22
-          }
-        ]
-      },
-      {
-        id: 'user',
-        values: [
-          {
-            id: 'verified',
-            value: 21
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'with_deposit',
-    values: [
-      {
-        id: 'team',
-        values: [
-          {
-            id: 'with_deposit',
-            value: 16
-          }
-        ]
-      },
-      {
-        id: 'user',
-        values: [
-          {
-            id: 'with_deposit',
-            value: 17
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 'with_active_engagement',
-    values: [
-      {
-        id: 'team',
-        values: [
-          {
-            id: 'with_active_engagement',
-            value: 7
-          }
-        ]
-      },
-      {
-        id: 'user',
-        values: [
-          {
-            id: 'with_active_engagement',
-            value: 5
-          }
-        ]
-      }
-    ]
-  }
-]
-
-const CHART_LABELS = {
-  claimed: 'Claimed',
-  contacted: 'Contacted',
-  approved: 'Approved',
-  verified: 'Verified',
-  with_deposit: 'With a Deposit',
-  with_active_engagement: 'With an Active Engagement'
-}
-
-const CHART_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'
-    }
-  },
-  contacted: {
-    team: {
-      contacted: 'Team Contacted Average'
-    },
-    user: {
-      contacted: 'Your Contacted'
-    }
-  },
-  approved: {
-    team: {
-      approved: 'Team Approved Average'
-    },
-    user: {
-      approved: 'Your Approved'
-    }
-  },
-  verified: {
-    team: {
-      verified: 'Team Verified Average'
-    },
-    user: {
-      verified: 'Your Verified'
-    }
-  },
-  with_deposit: {
-    team: {
-      with_deposit: 'Team With a Deposit Average'
-    },
-    user: {
-      with_deposit: 'Your With a Deposit'
-    }
-  },
-  with_active_engagement: {
-    team: {
-      with_active_engagement: 'Team With an Active Engagement Average'
-    },
-    user: {
-      with_active_engagement: 'Your With an Active Engagement'
-    }
-  }
-}
-
-const Example = () => (
-  <CategoriesChart
-    data={CHART_DATA}
-    labels={CHART_LABELS}
-    tooltips={CHART_TOOLTIPS}
-    width={720}
-  />
-)
-
-export default Example

package/src/CategoriesChart/story/index.jsx

@@ -1,61 +0,0 @@
-import CategoriesChart from '../CategoriesChart'
-import PicassoBook from '~/.storybook/components/PicassoBook'
-
-const page = PicassoBook.section('Picasso Charts').createPage(
-  'CategoriesChart',
-  'Use BarChart with analytics data'
-)
-
-page.createTabChapter('Props').addComponentDocs({
-  component: CategoriesChart,
-  name: 'CategoriesChart',
-  additionalDocs: Object.assign(
-    {},
-    {
-      data: {
-        name: 'data',
-        type: {
-          name: '[]',
-          description: `{
-          id: string
-          values: [
-            {
-              id: 'team'
-              values: Value[]
-            },
-            {
-              id: 'user'
-              values: Value[]
-            }
-          ]
-        }`
-        },
-        description: 'A record of kipper data to be rendered as a bar chart',
-        required: true
-      },
-      labels: {
-        name: 'labels',
-        type: {
-          name: '{}',
-          description: `Record<string, string>`
-        },
-        description: 'A record of labels from kipper data',
-        required: true
-      },
-      tooltips: {
-        name: 'tooltips',
-        type: {
-          name: '{}',
-          description: 'Record<string, Record<string, Record<string, string>>>'
-        },
-        description: 'A record of tooltips data from kipper data',
-        required: true
-      }
-    }
-  )
-})
-
-page.createChapter().addExample('CategoriesChart/story/Default.example.tsx', {
-  title: 'Default',
-  delay: 500
-})

package/src/CategoriesChart/types.ts

@@ -1,22 +0,0 @@
-export type Value = {
-  id: string
-  value: number
-}
-
-export type DataItem = {
-  id: string
-  values: [
-    {
-      id: string
-      values: Value[]
-    },
-    {
-      id: string
-      values: Value[]
-    }
-  ]
-}
-
-export type LabelMap = Record<string, string>
-
-export type TooltipMap = Record<string, Record<string, Record<string, string>>>

package/src/CategoriesChart/utils/format-data/format-data.ts

@@ -1,23 +0,0 @@
-import { sum } from '@toptal/picasso/utils'
-
-import { DataItem, LabelMap } from '../../types'
-
-const formatData = (data: DataItem[], labels: LabelMap) => {
-  return data.map(({ id, values }) => {
-    const [team, user] = values
-
-    const sumTeam = sum(team.values.map(({ value }) => value))
-    const sumUser = sum(user.values.map(({ value }) => value))
-
-    return {
-      name: id,
-      label: labels[id],
-      value: {
-        team: sumTeam,
-        user: sumUser
-      }
-    }
-  })
-}
-
-export default formatData

package/src/CategoriesChart/utils/format-data/index.ts

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

package/src/CategoriesChart/utils/format-data/test.ts

@@ -1,99 +0,0 @@
-import formatData from './format-data'
-import { DataItem } from '../../types'
-
-describe('formatData', () => {
-  it('formats categories chart data', () => {
-    const ORIGINAL_DATA: DataItem[] = [
-      {
-        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
-              }
-            ]
-          }
-        ]
-      },
-      {
-        id: 'contacted',
-        values: [
-          {
-            id: 'team',
-            values: [
-              {
-                id: 'contacted',
-                value: 189
-              }
-            ]
-          },
-          {
-            id: 'user',
-            values: [
-              {
-                id: 'contacted',
-                value: 421
-              }
-            ]
-          }
-        ]
-      }
-    ]
-
-    const CHART_LABELS = {
-      claimed: 'Claimed',
-      contacted: 'Contacted'
-    }
-
-    const EXPECTED_RESULT = [
-      {
-        name: 'claimed',
-        label: 'Claimed',
-        value: {
-          team: 263,
-          user: 619
-        }
-      },
-      {
-        name: 'contacted',
-        label: 'Contacted',
-        value: {
-          team: 189,
-          user: 421
-        }
-      }
-    ]
-
-    expect(formatData(ORIGINAL_DATA, CHART_LABELS)).toStrictEqual(
-      EXPECTED_RESULT
-    )
-  })
-})

package/src/CategoriesChart/utils/get-color/get-color.ts

@@ -1,37 +0,0 @@
-import { palette } from '@toptal/picasso/utils'
-
-const DEFAULT_COLORS = [palette.blue.main, palette.blue.darker]
-
-const COLOR_MAP: Record<string, string[]> = {
-  bad_leads: [palette.red.main, palette.red.main],
-  paused: [palette.yellow.main, palette.yellow.main],
-  removed: [palette.green.main, palette.green.main],
-  collections: [palette.red.main, palette.red.main],
-  pending: [palette.yellow.main, palette.yellow.main]
-}
-
-const BAD_RESULT_COLOR = palette.red.main
-
-const getColor = ({
-  dataKey,
-  entry
-}: {
-  dataKey: string
-  entry?: { name: string; value: { team: number; user: number } }
-}) => {
-  if (!entry) {
-    return DEFAULT_COLORS[0]
-  }
-
-  if (dataKey === 'team') {
-    return COLOR_MAP[entry.name]?.[0] || DEFAULT_COLORS[0]
-  }
-
-  if (entry.value.team > entry.value.user && entry.name !== 'claimed') {
-    return BAD_RESULT_COLOR
-  }
-
-  return COLOR_MAP[entry.name]?.[1] || DEFAULT_COLORS[1]
-}
-
-export default getColor

package/src/CategoriesChart/utils/get-color/index.ts

@@ -1 +0,0 @@
-export { default } from './get-color'

package/src/CategoriesChart/utils/get-color/test.ts

@@ -1,65 +0,0 @@
-import { palette } from '@toptal/picasso/utils'
-
-import getColor from './get-color'
-
-describe('getColor', () => {
-  const TEAM_COLOR_CHECK_LIST = [
-    ['claimed', palette.blue.main],
-    ['bad_leads', palette.red.main],
-    ['paused', palette.yellow.main],
-    ['removed', palette.green.main],
-    ['collections', palette.red.main],
-    ['pending', palette.yellow.main]
-  ]
-
-  it.each(TEAM_COLOR_CHECK_LIST)(
-    'returns correct color for team under status of %s',
-    (status, color) => {
-      expect(
-        getColor({
-          dataKey: 'team',
-          entry: { name: status, value: { team: 5, user: 6 } }
-        })
-      ).toBe(color)
-    }
-  )
-
-  const USER_COLOR_CHECK_LIST = [
-    ['claimed', palette.blue.darker],
-    ['bad_leads', palette.red.main],
-    ['paused', palette.yellow.main],
-    ['removed', palette.green.main],
-    ['collections', palette.red.main],
-    ['pending', palette.yellow.main]
-  ]
-
-  it.each(USER_COLOR_CHECK_LIST)(
-    'returns correct color for user under status of %s',
-    (status, color) => {
-      expect(
-        getColor({
-          dataKey: 'user',
-          entry: { name: status, value: { team: 5, user: 6 } }
-        })
-      ).toBe(color)
-    }
-  )
-
-  it('renders bad result color when user value is lower than team value', () => {
-    expect(
-      getColor({
-        dataKey: 'user',
-        entry: { name: 'some status', value: { team: 5, user: 4 } }
-      })
-    ).toBe(palette.red.main)
-  })
-
-  it('renders normal color when user value is lower than team value and status is claimed', () => {
-    expect(
-      getColor({
-        dataKey: 'user',
-        entry: { name: 'claimed', value: { team: 5, user: 4 } }
-      })
-    ).toBe(palette.blue.darker)
-  })
-})

package/src/CategoriesChart/utils/index.ts

@@ -1,2 +0,0 @@
-export { default as formatData } from './format-data'
-export { default as getColor } from './get-color'

package/src/CategoriesChartTooltip/CategoriesChartTooltip.tsx

@@ -1,57 +0,0 @@
-import React, { FC } from 'react'
-import { Paper, Container, Typography } from '@toptal/picasso'
-
-import { DataItem, TooltipMap } from '../CategoriesChart/types'
-import { getDisplayTexts } from './utils'
-
-export type Props = {
-  active: boolean
-  payload: { payload: { name: string; team: number; user: number } }[]
-  tooltips: TooltipMap
-  originalData: DataItem[]
-}
-
-const CategoriesChartTooltip: FC<Props> = ({
-  active,
-  payload,
-  tooltips,
-  originalData
-}) => {
-  if (active && payload && payload.length > 0) {
-    const currentData = originalData.find(
-      ({ id: dataId }) => dataId === payload[0].payload.name
-    )
-
-    if (!currentData) {
-      return null
-    }
-
-    const { teamTexts, userTexts } = getDisplayTexts({
-      currentData,
-      tooltips,
-      currentPayload: payload[0].payload
-    })
-
-    return (
-      <Paper data-testid='tooltip-content'>
-        <Container padded='xsmall'>
-          {teamTexts.map(({ key, label, value, color }) => (
-            <Typography size='medium' style={{ color }} key={key}>
-              {label}: {value}
-            </Typography>
-          ))}
-
-          {userTexts.map(({ key, label, value, color }) => (
-            <Typography size='medium' style={{ color }} key={key}>
-              {label}: {value}
-            </Typography>
-          ))}
-        </Container>
-      </Paper>
-    )
-  }
-
-  return null
-}
-
-export default CategoriesChartTooltip

package/src/CategoriesChartTooltip/index.ts

@@ -1 +0,0 @@
-export { default } from './CategoriesChartTooltip'

package/src/CategoriesChartTooltip/test.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { render, screen, TestingPicasso } from '@toptal/picasso/test-utils'
-
-import CategoriesChartTooltip, { Props } from './CategoriesChartTooltip'
-
-const renderTooltip = (props: Partial<Props>) => {
-  const defaultProps = {
-    active: true,
-    payload: [],
-    tooltips: {},
-    originalData: []
-  }
-
-  return render(
-    <TestingPicasso>
-      <CategoriesChartTooltip {...{ ...defaultProps, ...props }} />
-    </TestingPicasso>
-  )
-}
-
-describe('CategoriesChartTooltip', () => {
-  it('renders nothing when not active', () => {
-    renderTooltip({ active: false })
-
-    expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument()
-  })
-})

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

@@ -1,61 +0,0 @@
-import { DataItem, Value, TooltipMap } from '../../../CategoriesChart/types'
-import { getColor } from '../../../CategoriesChart/utils'
-
-type CurrentPayload = { name: string; user: number; team: number }
-
-export type GetDisplayTextsParams = {
-  currentData: DataItem
-  tooltips: TooltipMap
-  currentPayload: CurrentPayload
-}
-
-const getText = ({
-  originalValues,
-  currentPayload: { name, user, team },
-  tooltips,
-  dataKey
-}: {
-  originalValues: Value[]
-  currentPayload: CurrentPayload
-  tooltips: TooltipMap
-  dataKey: string
-}) =>
-  originalValues
-    .filter(({ value }) => !!value)
-    .map(({ id, value }) => ({
-      key: `${dataKey}-${id}`,
-      label: tooltips[name][dataKey][id],
-      value,
-      color: getColor({
-        dataKey,
-        entry: { name, value: { user, team } }
-      })
-    }))
-
-const getDisplayTexts = ({
-  currentData,
-  tooltips,
-  currentPayload
-}: GetDisplayTextsParams) => {
-  const [
-    { values: originalTeamValues },
-    { values: originalUserValues }
-  ] = currentData.values
-
-  return {
-    teamTexts: getText({
-      originalValues: originalTeamValues,
-      currentPayload,
-      tooltips,
-      dataKey: 'team'
-    }),
-    userTexts: getText({
-      originalValues: originalUserValues,
-      currentPayload,
-      tooltips,
-      dataKey: 'user'
-    })
-  }
-}
-
-export default getDisplayTexts

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

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