- About the Project
- Component Overview
- Installation
- Usage
- Component Listing
- Deployment
- Data Hosting
- Contributing
- Support
- License
- Attribution
The My Victoria component library aims to enable the publication of accessible maps, charts and user interface (UI) elements to websites by content owners across Government. It includes a set of reusable UI components designed to integrate with DDI’s existing ecosystem of platforms and services; and supporting documentation and examples to assist with their usage.
All components have been designed to align to Victorian Government design standards and branding; and include features to improve their accessibility.
For a higher level overview of how to get started, see the Getting Started Guide
All components have been developed with Vue as part of the MyVic-Components repository and aligned to the existing Ripple component library. Components are published to NPM, ready to be used directly in any Vue JS application.
Vue CLI is recommended for bootstrapping a new standalone Vue JS application.
Ripple includes example Vue JS and Nuxt sites that can be used to bootstrap a web application for deployment to SDP.
Storybook examples with component documentation are available here
Installation is straightforward with NPM or Yarn. See the component listing for all available packages.
npm install @dpc-sdp/myvic-bar-chart --saveor
yarn add @dpc-sdp/myvic-bar-chartAll components are published to NPM as individual packages under the @dpc-sdp namespace, with a myvic- prefix. For example:
- @dpc-sdp/myvic-map-core
- @dpc-sdp/myvic-bar-chart
Components are intended to be used with Vue.js projects, and can be installed with NPM as follows:
npm install @dpc-sdp/myvic-map-core --saveAnd imported using ES6 style imports:
import { MyvicMapCore } from '@dpc-sdp/myvic-map-core'Or using require as follows:
const MyvicMapCore = require("@dpc-sdp/myvic-map-core")Or imported directly into an HTML page (see the UMD Bundle documentation for more information:
<script src="https://cdn.jsdelivr.net/npm/@dpc-sdp/myvic-bundle@dev/dist/myvic-bundle.js"></script>A component for displaying an autocomplete search with results. This component renders a text input that allows searching over a set of items. The filtered results will appear beneath the input as a selectable list.
A component for looking up addresses in Victoria using an autocomplete search.
A component for looking up different kinds of areas using an autocomplete search.
A component for displaying a data-driven bar chart.
A component for displaying a data-driven line chart.
A component for displaying a data-driven pie chart.
A component for displaying a data-driven tree map.
A component for displaying a single data item as a block element.
A component for displaying a dynamic list of toggleable items.
An interactive map component based on OpenLayers.
A component that provides support for OSM, XYZ, WMS and ArcGIS tiled map layers.
A component that provides support for vector sources such as WFS, ArcGIS Feature Server and GeoJSON files.
A component that provides support for Mapbox Vector Tile sources.
Shared styles, libraries and utility functions for use across MyVictoria components.
Examples showing how multiple components can be bundled together and interact with each other.
A bundle of MyVictoria components packaged as a UMD. Mainly intended for use in existing HTML sites that are not already using Vue or Webpack.
Users of the My Victoria components are responsible for arranging their own web hosting. Some possible options include:
- A Standalone Vue or Nuxt app can be self hosted on any standard web server.
- Existing SDP Sites may be able to use the components via Drupal and Data Driven Component
- A New SDP Site
- Non Vue.js site using the UMD bundle
The My Victoria components don't have any specific requirements for data hosting, other than that the data is online and can be parsed with JavaScript. If hosting is required, some existing options include:
- MyVictoria (using Geoserver for hosting geospatial web services)
- Data.Vic
- API Gateway
Check our CONTRIBUTING.md
Digital Engagement, Department of Premier and Cabinet, Victoria, Australia is a maintainer of this package.
Distributed under the Apache 2.0 License. See LICENSE for more information.
Single Digital Presence offers government agencies an open and flexible toolkit to build websites quickly and cost-effectively.
