VisActor VBI
  • Tiếng Việt

      • Dimensions

      Chiều dữ liệu theo cột

      Chiều dữ liệu theo cột

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dimensions": [
    {
      "id": "category",
      "alias": "Danh mục"
    },
    {
      "id": "date",
      "alias": "Ngày",
      "encoding": "column"
    },
    {
      "id": "region",
      "alias": "Khu vực",
      "encoding": "column"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    }
  ],
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Personal",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Chiều dữ liệu thông thường

      Chiều dữ liệu thông thường

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dimensions": [
    {
      "id": "category",
      "alias": "Danh mục"
    },
    {
      "id": "date",
      "alias": "Ngày"
    },
    {
      "id": "region",
      "alias": "Khu vực"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    }
  ],
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Personal",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Chiều dữ liệu theo hàng

      Chiều dữ liệu theo hàng

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dimensions": [
    {
      "id": "category",
      "alias": "Danh mục"
    },
    {
      "id": "date",
      "alias": "Ngày",
      "encoding": "row"
    },
    {
      "id": "region",
      "alias": "Khu vực",
      "encoding": "row"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    }
  ],
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Personal",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      Chiều dữ liệu pivot

      Chiều dữ liệu pivot

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "columnParallel",
  "dimensions": [
    {
      "id": "category",
      "alias": "Danh mục"
    },
    {
      "id": "date",
      "alias": "Ngày",
      "encoding": "column"
    },
    {
      "id": "region",
      "alias": "Khu vực",
      "encoding": "row"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "Lợi nhuận"
    }
  ],
  "dataset": [
    {
      "date": "2019",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2019",
      "region": "west",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "east",
      "category": "Personal",
      "profit": 40
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Grocery",
      "profit": 10
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Beverages",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Dairy",
      "profit": 30
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Household",
      "profit": 50
    },
    {
      "date": "2020",
      "region": "west",
      "category": "Personal",
      "profit": 40
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}