koerber-gunt-chart

Preview

Installation

npm:

npm install koerber-gunt-chart

Example

References sampleData colors

import React from 'react'
import { GuntChartTable } from 'koerber-gunt-chart'
import { sampleData } from './constants/sampleData'
import { colors } from './constant/colors'

function App() {
  const tableProps = {
    horizontalHeader: 'Runden',
    verticalHeader: 'Muster',
    headingColor: '#3261ed',
    tableData: sampleData,
    colors
  }
  return (
    <div className="App">
      <GuntChartTable {...tableProps} />
    </div>
  )
}

export default App

| Property | Description | type | Default | | ----------------------------- | ----------------------------------------------------------------------------------- | ------- | ---------------------- | | tableData | Table data is the that we want to show in the form of gunt chart. | object | null/No-data | | colors | Colors would be the color of bars for the gunt chart, it should be array of colors. | Array | Array of random Colors | | horizontalHeader | This would be the horizontal header of the table. | string | Rounds | | verticalHeader | This would be the vertical header of the table. | string | Samples | | headingColor | This defines the background color of vertical and horizontal heading of the table. | string | #3261ed | | Loading | This prop is used to show loading skeleton. | boolean | false |

tableData

Sample Table Data:

export const sample = {
  matrix: [
    [
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 2, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 1, changed: true }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }],
      [{ value: 0, changed: false }]
    ]
  ],
  defects: [
    {
      id: 1,
      name: 'my-defect',
      groupId: 1,
      sectionId: 30805,
      createdAt: '2022-09-19T08:20:49.059Z',
      updatedAt: '2022-09-19T08:20:49.059Z'
    }
  ],
  samples: [
    {
      id: 1,
      name: 'my-first-sample',
      sectionId: 30805,
      positionNr: 1,
      createdAt: '2022-09-19T08:23:19.838Z',
      updatedAt: '2022-09-19T08:23:19.838Z'
    },
    {
      id: 2,
      name: 'my-second-sample',
      sectionId: 30805,
      positionNr: 10,
      createdAt: '2022-09-19T08:23:19.838Z',
      updatedAt: '2022-09-19T08:23:19.838Z'
    },
    {
      id: 3,
      name: 'my-third-sample',
      sectionId: 30805,
      positionNr: 13,
      createdAt: '2022-09-19T08:23:19.838Z',
      updatedAt: '2022-09-19T08:23:19.838Z'
    }
  ]
}

rounds are the number of round a sample has been tested. ie. 2 rounds means sample has been tested twice.(Vertical columns of chart) samples samples are the drug or any item that has been gone for quality assurance(test).(Horizontal Rows of chart) defects defects are basically the defects found on samples in a particular round.(Legend of chart)

colors

const colors = ['#aa69d2', '#208f81', '#42abb7', '#9eec41', '#85e22c', '#072bad', '#e93543', '#278729', '#a7bcce', '#e39050']

Each color would be assigned to each defect, in absence of this array random color would be assigned to defects. Incase the number of color is less than number of defects, the color would be repeated from the 0th index until it covers all the defects.

headingColor

This defines the header color, It'll change the background color of table header (horizontal and vertical) to the given color. If there is no color given or invalid color given then the header bg color would be #3261ed