Develop a visual tea garden monitoring dashboard

Procedure

1. In the Development Tools section, click Web Visualized Development.
2. Create a web visual application.
   1. On the Web Visualized Development page, click the Blank Application tile.
   2. In the New Web App dialog box, configure the application's basic information and click OK.

      Parameter	Description
      Application name	Enter a name for the application, such as Tea Garden Monitoring Dashboard. The name can be up to 30 characters long (each Chinese character counts as one character) and must start with a letter, digit, or Chinese character. It can contain only letters, digits, Chinese characters, underscores (_), hyphens (-), and parentheses (()).
      Project	Select your project: Tea Garden Monitoring Solution.
      Description	Enter a description for the application, up to 100 characters long. Each Chinese character counts as one character.

3. Configure the application page and title.
   1. Set the page background and resolution as needed. Add a rectangle component to serve as a background for other components. For details, see page and rectangle.
      Recommended style properties for the rectangle component: Position X=14, Y=16; Size W=524, H=870; Fill color #FFFFFF; Border width 1, color #333333, and solid style; Opacity 100%.
   2. Add a text component to display the title, for example, Tea Garden Temperature Monitoring. For details, see text.
4. Configure a drop-down list for device selection.
   1. Add a text component to serve as the title for the drop-down list.
   2. Add and style a drop-down list component to display device names. For details, see drop-down list.

      Parameter	Description
      List content	Select Device to populate the drop-down list with device names.
      Select product	Select the product whose devices you want to display. For this tutorial, select Temperature Detector. The drop-down list will then show the device names from that product.
      Default value	Optional. Specify a default option or always select the first item in the list as the default.

   3. In the configuration pane, select the Interaction tab and click Add Interaction.
   4. Set Event to Value Change and Action to Assign to Page Variable, and then click Manage Page Variables.
   5. Click Add Page Variable to create a page variable named DeviceName.
      In the dialog box, enter the variable name in the Page Variable Name field. Set a Default Value and Description as needed, and then click OK.
   6. Return to the Interaction tab, click Configure > Assignment, select value, and assign it to the DeviceName page variable.
   7. Click OK to complete the interaction configuration.
5. Configure a Time component to set the start time for the data query.
   1. Add a text component to serve as the title for the time component.
   2. Configure the style of the time component. Set the time unit to second. For details, see time.
   3. Configure an interaction.
      Create a page variable named startTime. Configure a Value Change event to assign the selected value to this page variable. For detailed instructions, see Configure a drop-down list for device selection.
6. Repeat the previous step to configure another time component to set the end time for the data query and configure its interaction.
   Interaction: A Value Change event assigns the component's value to the endTime page variable. In the Tea Garden Temperature Monitoring form, the End Time time picker is selected. The form also contains the Select Detection Point drop-down list and the Start Time time picker.
7. Configure a line chart component to display temperature data.
   For details about the line chart component configuration, see line chart.
   1. Add a text component to serve as the title for the line chart component.
   2. Add a line chart component and adjust its position on the page.
   3. Configure the data source for the line chart. Set it to an existing HTTP API (for example, an API to get temperature data) and map the request parameters to the page variables you created. For API details, see Develop a service to get temperature data.
      Note If the data that the API returns does not match the format that the component requires, you must use a data filter to transform the data. For details, see data filter.

      In the Data Source Configuration dialog box, set Select Data Source to API, API Source to Service Development Workbench, and Select API to Get Temperature Data. For Request Parameters, select Dynamic Parameters and map the request parameters to their corresponding page variables: DeviceName to the DeviceName variable, startTime to the startTime variable, and endTime to the endTime variable. Select the auto-update checkbox for all three parameters.
   4. Configure the line chart to display the data.
      You can configure the display style of the line chart as needed. On the data configuration page for the line chart, set the data source to Result returned by the Get Temperature Data API. Set the dimension to dateTime and the metric to maxTemperature. Set the x-axis to dateTime and the y-axis to maxTemperature. In the properties panel on the right, you can set the color for the metric, such as #0070CC. After you confirm the preview, click Complete Configuration in the upper-right corner.
   5. For the end time component, configure a second interaction: a Value Change event to refresh the line chart component.
8. In the top bar, click Save, then Preview to review the application, and finally Publish.