koerber-gunt-chart v0.0.20

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

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