main.qml Example File | Qt Data Visualization 5.12.3

Qt 5.12 | Qt Data Visualization | Qt Quick 2 Legend Example | main.qml Example File

Qt Data Visualization | Commercial or GPLv3

# main.qml Example File

qmllegend/qml/qmllegend/main.qml

      /****************************************************************************
      **
      ** Copyright (C) 2016 The Qt Company Ltd.
      ** Contact: https://www.qt.io/licensing/
      **
      ** This file is part of the Qt Data Visualization module of the Qt Toolkit.
      **
      ** $QT_BEGIN_LICENSE:GPL$
      ** Commercial License Usage
      ** Licensees holding valid commercial Qt licenses may use this file in
      ** accordance with the commercial license agreement provided with the
      ** Software or, alternatively, in accordance with the terms contained in
      ** a written agreement between you and The Qt Company. For licensing terms
      ** and conditions see https://www.qt.io/terms-conditions. For further
      ** information use the contact form at https://www.qt.io/contact-us.
      **
      ** GNU General Public License Usage
      ** Alternatively, this file may be used under the terms of the GNU
      ** General Public License version 3 or (at your option) any later version
      ** approved by the KDE Free Qt Foundation. The licenses are as published by
      ** the Free Software Foundation and appearing in the file LICENSE.GPL3
      ** included in the packaging of this file. Please review the following
      ** information to ensure the GNU General Public License requirements will
      ** be met: https://www.gnu.org/licenses/gpl-3.0.html.
      **
      ** $QT_END_LICENSE$
      **
      ****************************************************************************/

      import QtQuick 2.1
      import QtQuick.Controls 1.0
      import QtQuick.Layouts 1.0
      import QtDataVisualization 1.0
      import "."

      Rectangle {
          id: mainView
          width: 800
          height: 600

          property int buttonLayoutHeight: 180;

          Data {
              id: graphData
          }

          Theme3D {
              id: firstTheme
              type: Theme3D.ThemeQt
          }

          Theme3D {
              id: secondTheme
              type: Theme3D.ThemeEbony
          }

          Item {
              id: dataView
              anchors.fill: parent

              Bars3D {
                  id: barGraph
                  anchors.fill: parent
                  selectionMode: AbstractGraph3D.SelectionItemAndRow
                  scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
                  theme: firstTheme
                  valueAxis.labelFormat: "%d\u00B0C"

                  Bar3DSeries {
                      id: station1
                      name: "Station 1"
                      itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                      ItemModelBarDataProxy {
                          itemModel: graphData.model
                          rowRole: "year"
                          columnRole: "month"
                          valueRole: "s1"
                      }
                  }
                  Bar3DSeries {
                      id: station2
                      name: "Station 2"
                      itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                      ItemModelBarDataProxy {
                          itemModel: graphData.model
                          rowRole: "year"
                          columnRole: "month"
                          valueRole: "s2"
                      }
                  }
                  Bar3DSeries {
                      id: station3
                      name: "Station 3"
                      itemLabelFormat: "Temperature at @seriesName for @colLabel, @rowLabel: @valueLabel"

                      ItemModelBarDataProxy {
                          itemModel: graphData.model
                          rowRole: "year"
                          columnRole: "month"
                          valueRole: "s2"
                      }
                  }
              }
          }

          Rectangle {
              property int legendLocation: 3
              // Make the height and width fractional of main view height and width.
              // Reverse the relation if screen is in portrait - this makes legend look the same
              // if the orientation is rotated.
              property int fractionalHeight: mainView.width > mainView.height ? mainView.height / 5 : mainView.width / 5
              property int fractionalWidth: mainView.width > mainView.height ? mainView.width / 5 : mainView.height / 5

              id: legendPanel
              width: fractionalWidth > 150 ? fractionalWidth : 150
              // Adjust legendpanel height to avoid gaps between layouted items.
              height: fractionalHeight > 99 ? fractionalHeight - fractionalHeight % 3 : 99
              border.color: barGraph.theme.labelTextColor
              border.width: 3
              color: "#00000000" // Transparent

              ColumnLayout {
                  anchors.fill: parent
                  anchors.margins: parent.border.width
                  spacing: 0
                  clip: true
                  LegendItem {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                      series: station1
                      theme: barGraph.theme
                  }
                  LegendItem {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                      series: station2
                      theme: barGraph.theme
                  }
                  LegendItem {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                      series: station3
                      theme: barGraph.theme
                  }
              }

              states: [
                  State  {
                      name: "topleft"
                      when: legendPanel.legendLocation === 1
                      AnchorChanges {
                          target: legendPanel
                          anchors.top: buttonLayout.bottom
                          anchors.bottom: undefined
                          anchors.left: dataView.left
                          anchors.right: undefined
                      }
                  },
                  State  {
                      name: "topright"
                      when: legendPanel.legendLocation === 2
                      AnchorChanges {
                          target: legendPanel
                          anchors.top: buttonLayout.bottom
                          anchors.bottom: undefined
                          anchors.left: undefined
                          anchors.right: dataView.right
                      }
                  },
                  State  {
                      name: "bottomleft"
                      when: legendPanel.legendLocation === 3
                      AnchorChanges {
                          target: legendPanel
                          anchors.top: undefined
                          anchors.bottom: dataView.bottom
                          anchors.left: dataView.left
                          anchors.right: undefined
                      }
                  },
                  State  {
                      name: "bottomright"
                      when: legendPanel.legendLocation === 4
                      AnchorChanges {
                          target: legendPanel
                          anchors.top: undefined
                          anchors.bottom: dataView.bottom
                          anchors.left: undefined
                          anchors.right: dataView.right
                      }
                  }
              ]
          }

          RowLayout {
              id: buttonLayout
              Layout.minimumHeight: themeToggle.height
              width: parent.width
              anchors.left: parent.left
              spacing: 0

              NewButton {
                  id: themeToggle
                  Layout.fillHeight: true
                  Layout.fillWidth: true
                  text: "Change Theme"
                  onClicked: {
                      if (barGraph.theme === firstTheme) {
                          barGraph.theme = secondTheme
                      } else {
                          barGraph.theme = firstTheme
                      }
                  }
              }
              NewButton {
                  id: repositionLegend
                  Layout.fillHeight: true
                  Layout.fillWidth: true
                  text: "Reposition Legend"
                  onClicked: {
                      if (legendPanel.legendLocation === 4) {
                          legendPanel.legendLocation = 1
                      } else {
                          legendPanel.legendLocation++
                      }
                  }
              }
              NewButton {
                  id: exitButton
                  Layout.fillHeight: true
                  Layout.fillWidth: true
                  text: "Quit"
                  onClicked: Qt.quit(0);
              }
          }

      }