VisActor VBI
  • Deutsch

      • Table

      Basic Table

      A basic table for displaying raw data in rows and columns.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "table",
  "dataset": [
    {
      "date": "2019",
      "type": "A",
      "goalProfit": 10,
      "profit": 10,
      "sales": 100,
      "leftCount": 1,
      "salesCount": 100
    },
    {
      "date": "2020",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 320,
      "leftCount": 2,
      "salesCount": 200
    },
    {
      "date": "2021",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 300,
      "leftCount": 3,
      "salesCount": 300
    },
    {
      "date": "2022",
      "type": "A",
      "goalProfit": 50,
      "profit": 50,
      "sales": 240,
      "leftCount": 4,
      "salesCount": 400
    },
    {
      "date": "2023",
      "type": "A",
      "goalProfit": 40,
      "profit": 40,
      "sales": 500,
      "leftCount": 5,
      "salesCount": 500
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Basistabelle

      Basistabelle

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "table",
  "dataset": [
    {
      "date": "2019",
      "type": "A",
      "goalProfit": 10,
      "profit": 10,
      "sales": 100,
      "leftCount": 1,
      "salesCount": 100
    },
    {
      "date": "2020",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 320,
      "leftCount": 2,
      "salesCount": 200
    },
    {
      "date": "2021",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 300,
      "leftCount": 3,
      "salesCount": 300
    },
    {
      "date": "2022",
      "type": "A",
      "goalProfit": 50,
      "profit": 50,
      "sales": 240,
      "leftCount": 4,
      "salesCount": 400
    },
    {
      "date": "2023",
      "type": "A",
      "goalProfit": 40,
      "profit": 40,
      "sales": 500,
      "leftCount": 5,
      "salesCount": 500
    }
  ],
  "measures": [
    {
      "id": "goalProfit",
      "alias": "Gewinnziel"
    },
    {
      "id": "profit",
      "alias": "Gewinn"
    },
    {
      "id": "sales",
      "alias": "Absatzmenge"
    },
    {
      "id": "leftCount",
      "alias": "Restanzahl"
    },
    {
      "id": "salesCount",
      "alias": "Verkaufsanzahl"
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "Datum"
    },
    {
      "id": "type",
      "alias": "Typ"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Gruppierte Tabelle

      Gruppierte Tabelle

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "table",
  "dataset": [
    {
      "date": "2019",
      "type": "A",
      "goalProfit": 10,
      "profit": 10,
      "sales": 100,
      "leftCount": 1,
      "salesCount": 100
    },
    {
      "date": "2020",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 320,
      "leftCount": 2,
      "salesCount": 200
    },
    {
      "date": "2021",
      "type": "A",
      "goalProfit": 30,
      "profit": 30,
      "sales": 300,
      "leftCount": 3,
      "salesCount": 300
    },
    {
      "date": "2022",
      "type": "A",
      "goalProfit": 50,
      "profit": 50,
      "sales": 240,
      "leftCount": 4,
      "salesCount": 400
    },
    {
      "date": "2023",
      "type": "A",
      "goalProfit": 40,
      "profit": 40,
      "sales": 500,
      "leftCount": 5,
      "salesCount": 500
    }
  ],
  "measures": [
    {
      "id": "goalProfit",
      "alias": "Gewinnziel"
    },
    {
      "id": "profit",
      "alias": "Gewinn"
    },
    {
      "id": "table",
      "alias": "Verkaufskennzahlen",
      "children": [
        {
          "id": "countInfo",
          "alias": "Mengeninformationen",
          "children": [
            {
              "id": "leftCount",
              "alias": "Restanzahl"
            },
            {
              "id": "salesCount",
              "alias": "Verkaufsanzahl"
            }
          ]
        },
        {
          "id": "saleInfo",
          "alias": "Verkaufsinformationen",
          "children": [
            {
              "id": "sales",
              "alias": "Absatzmenge"
            }
          ]
        }
      ]
    }
  ],
  "dimensions": [
    {
      "id": "dimensionGroup",
      "alias": "Dimensionsgruppe",
      "children": [
        {
          "id": "date",
          "alias": "Datum"
        },
        {
          "id": "type",
          "alias": "Typ"
        }
      ]
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Table with Sum Aggregation

      A table with sum aggregation at the bottom.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "table",
  "dataset": [
    {
      "product": "Product A",
      "sales": 1000,
      "profit": 200
    },
    {
      "product": "Product B",
      "sales": 1500,
      "profit": 300
    },
    {
      "product": "Product C",
      "sales": 800,
      "profit": 150
    }
  ],
  "dimensions": [
    {
      "id": "product",
      "alias": "Produktname"
    }
  ],
  "measures": [
    {
      "id": "sales",
      "alias": "Umsatz"
    },
    {
      "id": "profit",
      "alias": "Gewinn",
      "numFormat": {
        "type": "number",
        "fractionDigits": 1
      }
    }
  ],
  "totals": "sum"
}

  return <VSeedRender vseed={vseedConfig} />
}