city-dashboard-component v1.1.0

City Dashboard Component

Requirements

This component was designed for Vue version 3 or above. Please install via npm version 20 or above.

Installation

1. Install the package via npm.

npm i city-dashboard-component

2. Import the stylesheet to main.js.

import "city-dashboard-component/style.css";

3. Import the component globally or locally in any Vue component.

import { DashboardComponent } from "city-dashboard-component";

// If global
app.component("DashboardComponent", DashboardComponent);

Modes

• Default: The default form of this component with a chart in the middle.
• Large: Slightly larger height than default mode.
• Half: Half the height of default mode.
• Map: Adds a toggle and collapse mode.
• HalfMap: Half the height of map mode when expanded.
• Preview: No chart in the middle but only descriptions.

Props

This component follows the configuration of Taipei City Dashboard. Please refer to its documentation for more information.

Events

This component follows the configuration of Taipei City Dashboard. Please refer to its documentation for more information.

Example

<script setup>
import { ref } from "vue"
import { DashboardComponent } from "city-dashboard-component"

const config = {...} // Please refer to Taipei City Dashboard Docs
const isFavorite = ref(false);

function showMoreInfo(config) {
  // a function to open a dialog to show more info about the component
}
</script>

<template>
  <DashboardComponent
      mode="default"
      :config="config"
      :info-btn="true"
      :favorite-btn="true"
      :is-favorite="isFavorite"
      @favorite="
        (id) => {
          console.log(id);
          isFavorite = !isFavorite
        }
      "
      @info="
        (config) => {
          showMoreInfo(config);
        }
      "
  />
</template>

For more examples, please refer to Taipei City Dashboard or its GitHub repository.

© 2023-2024 Igor Ho, One Premium Ltd.