|
7 | 7 |
|
8 | 8 | Re-usable React components used by the [Forge Dataviz IoT Reference App](https://github.com/Autodesk-Forge/forge-dataviz-iot-reference-app). |
9 | 9 |
|
10 | | -## Installing and Using the Modules |
11 | | - |
12 | | -For full instructions for installing and running the Data Visualization Extension (Beta) Reference Application and supporting modules, see the [Data Visualization Extension (Beta) QuickStart](https://forge.autodesk.com/en/docs/dataviz/v1/developers_guide/quickstart/). |
13 | | - |
14 | | -To install only this module: |
15 | | - |
16 | | -```bash |
17 | | -npm install forge-dataviz-iot-react-components |
18 | | -``` |
19 | | - |
20 | | -To import the components: |
21 | | - |
22 | | -```javascript |
23 | | -// To import the Viewer component |
24 | | -import { Viewer } from "forge-dataviz-iot-react-components"; |
25 | | - |
26 | | -function SampleApp(props) { |
27 | | - return ( |
28 | | - <Viewer |
29 | | - env={env} |
30 | | - docUrn={docUrn} |
31 | | - api={api} |
32 | | - onViewerInitialized={onViewerInitialized} |
33 | | - onModelLoaded={onModelLoaded} |
34 | | - getToken={getToken} |
35 | | - /> |
36 | | - ); |
37 | | -} |
38 | | -module.export = SampleApp; |
39 | | -``` |
40 | | - |
41 | | -## Contents |
42 | | - |
43 | | -This package contains all of the React components used in the [Data Visualization Reference Application](https://github.com/Autodesk-Forge/forge-dataviz-iot-reference-app). |
44 | | - |
45 | | -NOTE: Most of these components were created using the [Material UI](http://material-ui.com/) framework. |
46 | | - |
47 | | -### Components |
48 | | - |
49 | | -- BaseApp - Complete UI encompassing all of the following components: |
50 | | - |
51 | | - |
52 | | - |
53 | | -- BasicDatePicker - A date picker component that enables date selection via calendar input. |
54 | | -- ChronosTimeSlider - Interactive timeslider based off the chronos-etu npm package |
55 | | -- DataPanelContainer - Extendable panel that contains the DevicePanel and Dashboard |
56 | | -- DevicePanel - Displays the DeviceTree and a search bar for a user to search through the devices. |
57 | | -- DeviceStats - Chip components showing the icon and property value |
58 | | -- DeviceTree - Hierarchical arrangement of devices |
59 | | -- HeatmapOptions - Gradient slider and associated heatmap property and resolution selection options. |
60 | | -- HyperionToolContainer - 2-button menu to show the Levels Tree and a panel containing device setting options. |
61 | | -- Viewer - React component wrapper for Autodesk Forge Viewer. |
62 | | -- BasicTree - Basic hierarchical tree structure used by DeviceTree and HyperionToolContainer. |
63 | | -- EventTypes - Defines the events dispatched by the components. |
64 | | - |
65 | | - |
66 | | - |
67 | | -- CustomToolTip - A tooltip component that contains DataCharts for a specific device. |
68 | | -- Dashboard - Shows chart data for each property associated with a device. |
69 | | -- DataChart - A React Echarts instance representing the chart data for a property of a device. |
70 | | - |
71 | | -For the API documentation for each component, see the Data Visualization (Beta) [API Reference](https://forge.autodesk.com/en/docs/dataviz/v1/reference/UI/) |
72 | | - |
73 | | -## Troubleshooting: |
74 | | -If the styling for **BasicDatePicker** is missing, add the following line to import react-dates styles: |
75 | | - |
76 | | -```javascript |
77 | | -import "react-dates/lib/css/_datepicker.css"; |
78 | | -``` |
| 10 | +Full instructions on how to use the package can be found [here](https://forge.autodesk.com/en/docs/dataviz/v1/developers_guide/npm_packages/react_components/) |
0 commit comments