VisActor VBI
  • Tiếng Việt

      • PivotTable

      Basic PivotTable

      A pivot table for summarizing and analyzing large datasets.

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "pivotTable",
  "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} />
}

      Pivot theo chiều hàng

      Pivot theo chiều hàng

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "pivotTable",
  "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": "Mục tiêu lợi nhuận"
    },
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    },
    {
      "id": "sales",
      "alias": "Số lượng bán"
    },
    {
      "id": "leftCount",
      "alias": "Số lượng còn lại"
    },
    {
      "id": "salesCount",
      "alias": "Số lượt bán"
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "Ngày",
      "encoding": "row"
    },
    {
      "id": "type",
      "alias": "Loại",
      "encoding": "row"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Pivot theo chiều cột

      Pivot theo chiều cột

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "pivotTable",
  "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": "Mục tiêu lợi nhuận"
    },
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    },
    {
      "id": "leftCount",
      "alias": "Số lượng còn lại"
    },
    {
      "id": "salesCount",
      "alias": "Số lượt bán"
    },
    {
      "id": "sales",
      "alias": "Số lượng bán"
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "Ngày",
      "encoding": "column"
    },
    {
      "id": "type",
      "alias": "Loại",
      "encoding": "column"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}