main.qml Example File

  /****************************************************************************
  **
  ** 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.1
  import QtQuick.Window 2.0
  import "."

  Rectangle {
      id: mainview
      width: 1280
      height: 1024

      property int buttonLayoutHeight: 180;
      state: Screen.width < Screen.height ? "portrait" : "landscape"

      Data {
          id: graphData
      }

      Axes {
          id: graphAxes
      }

      property Bar3DSeries selectedSeries
      selectedSeries: barSeries

      function handleSelectionChange(series, position) {
          if (position != series.invalidSelectionPosition) {
              selectedSeries = series
          }

          // Set tableView current row to selected bar
          var rowRole = series.dataProxy.rowLabels[position.x];
          var colRole
          if (barGraph.columnAxis === graphAxes.total)
              colRole = "01";
          else
              colRole = series.dataProxy.columnLabels[position.y];
          var checkTimestamp = rowRole + "-" + colRole
          var currentRow = tableView.currentRow
          if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) {
              var totalRows = tableView.rowCount;
              for (var i = 0; i < totalRows; i++) {
                  var modelTimestamp = graphData.model.get(i).timestamp
                  if (modelTimestamp === checkTimestamp) {
                      tableView.currentRow = i
                      // Workaround to 5.2 row selection issue
                      if (typeof tableView.selection != "undefined") {
                          tableView.selection.clear()
                          tableView.selection.select(i)
                      }
                      break
                  }
              }
          }
      }

      Item {
          id: dataView
          anchors.right: mainview.right;
          anchors.bottom: mainview.bottom

          Bars3D {
              id: barGraph
              width: dataView.width
              height: dataView.height
              shadowQuality: AbstractGraph3D.ShadowQualityMedium
              selectionMode: AbstractGraph3D.SelectionItem
              theme: Theme3D {
                  type: Theme3D.ThemeRetro
                  labelBorderEnabled: true
                  font.pointSize: 35
                  labelBackgroundEnabled: true
                  colorStyle: Theme3D.ColorStyleRangeGradient
                  singleHighlightGradient: customGradient

                  ColorGradient {
                      id: customGradient
                      ColorGradientStop { position: 1.0; color: "#FFFF00" }
                      ColorGradientStop { position: 0.0; color: "#808000" }
                  }
              }
              barThickness: 0.7
              barSpacing: Qt.size(0.5, 0.5)
              barSpacingRelative: false
              scene.activeCamera.cameraPreset: Camera3D.CameraPresetIsometricLeftHigh
              columnAxis: graphAxes.column
              rowAxis: graphAxes.row
              valueAxis: graphAxes.value

              Bar3DSeries {
                  id: secondarySeries
                  visible: false
                  itemLabelFormat: "Expenses, @colLabel, @rowLabel: -@valueLabel"
                  baseGradient: secondaryGradient

                  ItemModelBarDataProxy {
                      id: secondaryProxy
                      itemModel: graphData.model
                      rowRole: "timestamp"
                      columnRole: "timestamp"
                      valueRole: "expenses"
                      rowRolePattern: /^(\d\d\d\d).*$/
                      columnRolePattern: /^.*-(\d\d)$/
                      valueRolePattern: /-/
                      rowRoleReplace: "\\1"
                      columnRoleReplace: "\\1"
                      multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative
                  }

                  ColorGradient {
                      id: secondaryGradient
                      ColorGradientStop { position: 1.0; color: "#FF0000" }
                      ColorGradientStop { position: 0.0; color: "#600000" }
                  }

                  onSelectedBarChanged: handleSelectionChange(secondarySeries, position)
              }

              Bar3DSeries {
                  id: barSeries
                  itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel"
                  baseGradient: barGradient

                  ItemModelBarDataProxy {
                      id: modelProxy
                      itemModel: graphData.model
                      rowRole: "timestamp"
                      columnRole: "timestamp"
                      valueRole: "income"
                      rowRolePattern: /^(\d\d\d\d).*$/
                      columnRolePattern: /^.*-(\d\d)$/
                      rowRoleReplace: "\\1"
                      columnRoleReplace: "\\1"
                      multiMatchBehavior: ItemModelBarDataProxy.MMBCumulative
                  }

                  ColorGradient {
                      id: barGradient
                      ColorGradientStop { position: 1.0; color: "#00FF00" }
                      ColorGradientStop { position: 0.0; color: "#006000" }
                  }

                  onSelectedBarChanged: handleSelectionChange(barSeries, position)
              }
          }
      }

      TableView {
          id: tableView
          anchors.top: parent.top
          anchors.left: parent.left
          TableViewColumn{ role: "timestamp" ; title: "Month" ; width: tableView.width / 2 }
          TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: tableView.width / 4 }
          TableViewColumn{ role: "income" ; title: "Income" ; width: tableView.width / 4 }
          itemDelegate: Item {
              Text {
                  id: delegateText
                  anchors.verticalCenter: parent.verticalCenter
                  width: parent.width
                  anchors.leftMargin: 4
                  anchors.left: parent.left
                  anchors.right: parent.right
                  color: styleData.textColor
                  elide: styleData.elideMode
                  text: customText
                  horizontalAlignment: styleData.textAlignment

                  property string originalText: styleData.value
                  property string customText

                  onOriginalTextChanged: {
                      if (styleData.column === 0) {
                          if (delegateText.originalText !== "") {
                              var pattern = /(\d\d\d\d)-(\d\d)/
                              var matches = pattern.exec(delegateText.originalText)
                              var colIndex = parseInt(matches[2], 10) - 1
                              delegateText.customText = matches[1] + " - " + graphAxes.column.labels[colIndex]
                          }
                      } else {
                          delegateText.customText = originalText
                      }
                  }
              }
          }

          model: graphData.model

          onCurrentRowChanged: {
              var timestamp = graphData.model.get(currentRow).timestamp
              var pattern = /(\d\d\d\d)-(\d\d)/
              var matches = pattern.exec(timestamp)
              var rowIndex = modelProxy.rowCategoryIndex(matches[1])
              var colIndex
              if (barGraph.columnAxis === graphAxes.total)
                  colIndex = 0 // Just one column when showing yearly totals
              else
                  colIndex = modelProxy.columnCategoryIndex(matches[2])
              if (selectedSeries.visible)
                  mainview.selectedSeries.selectedBar = Qt.point(rowIndex, colIndex)
              else if (barSeries.visible)
                  barSeries.selectedBar = Qt.point(rowIndex, colIndex)
              else
                  secondarySeries.selectedBar = Qt.point(rowIndex, colIndex)
          }
      }

      ColumnLayout {
          id: controlLayout
          spacing: 0

          Button {
              id: changeDataButton
              Layout.fillWidth: true
              Layout.fillHeight: true
              text: "Show 2010 - 2012"
              clip: true
              onClicked: {
                  if (text === "Show yearly totals") {
                      modelProxy.autoRowCategories = true
                      secondaryProxy.autoRowCategories = true
                      modelProxy.columnRolePattern = /^.*$/
                      secondaryProxy.columnRolePattern = /^.*$/
                      graphAxes.value.autoAdjustRange = true
                      barGraph.columnAxis = graphAxes.total
                      text = "Show all years"
                  } else if (text === "Show all years") {
                      modelProxy.autoRowCategories = true
                      secondaryProxy.autoRowCategories = true
                      modelProxy.columnRolePattern = /^.*-(\d\d)$/
                      secondaryProxy.columnRolePattern = /^.*-(\d\d)$/
                      graphAxes.value.min = 0
                      graphAxes.value.max = 35
                      barGraph.columnAxis = graphAxes.column
                      text = "Show 2010 - 2012"
                  } else { // text === "Show 2010 - 2012"
                      // Explicitly defining row categories, since we do not want to show data for
                      // all years in the model, just for the selected ones.
                      modelProxy.autoRowCategories = false
                      secondaryProxy.autoRowCategories = false
                      modelProxy.rowCategories = ["2010", "2011", "2012"]
                      secondaryProxy.rowCategories = ["2010", "2011", "2012"]
                      text = "Show yearly totals"
                  }
              }
          }

          Button {
              id: shadowToggle
              Layout.fillWidth: true
              Layout.fillHeight: true
              text: barGraph.shadowsSupported ? "Hide Shadows" : "Shadows not supported"
              clip: true
              enabled: barGraph.shadowsSupported
              onClicked: {
                  if (barGraph.shadowQuality == AbstractGraph3D.ShadowQualityNone) {
                      barGraph.shadowQuality = AbstractGraph3D.ShadowQualityMedium;
                      text = "Hide Shadows"
                  } else {
                      barGraph.shadowQuality = AbstractGraph3D.ShadowQualityNone;
                      text = "Show Shadows"
                  }
              }
          }

          Button {
              id: seriesToggle
              Layout.fillWidth: true
              Layout.fillHeight: true
              text: "Show Expenses"
              clip: true
              onClicked: {
                  if (text === "Show Expenses") {
                      barSeries.visible = false
                      secondarySeries.visible = true
                      barGraph.valueAxis.labelFormat = "-%.2f M\u20AC"
                      secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: @valueLabel"
                      text = "Show Both"
                  } else if (text === "Show Both") {
                      barSeries.visible = true
                      barGraph.valueAxis.labelFormat = "%.2f M\u20AC"
                      secondarySeries.itemLabelFormat = "Expenses, @colLabel, @rowLabel: -@valueLabel"
                      text = "Show Income"
                  } else { // text === "Show Income"
                      secondarySeries.visible = false
                      text = "Show Expenses"
                  }
              }
          }
      }

      states: [
          State  {
              name: "landscape"
              PropertyChanges {
                  target: dataView
                  width: mainview.width / 4 * 3
                  height: mainview.height
              }
              PropertyChanges  {
                  target: tableView
                  height: mainview.height - buttonLayoutHeight
                  anchors.right: dataView.left
                  anchors.left: mainview.left
                  anchors.bottom: undefined
              }
              PropertyChanges  {
                  target: controlLayout
                  width: mainview.width / 4
                  height: buttonLayoutHeight
                  anchors.top: tableView.bottom
                  anchors.bottom: mainview.bottom
                  anchors.left: mainview.left
                  anchors.right: dataView.left
              }
          },
          State  {
              name: "portrait"
              PropertyChanges {
                  target: dataView
                  width: mainview.height / 4 * 3
                  height: mainview.width
              }
              PropertyChanges  {
                  target: tableView
                  height: mainview.width
                  anchors.right: controlLayout.left
                  anchors.left: mainview.left
                  anchors.bottom: dataView.top
              }
              PropertyChanges  {
                  target: controlLayout
                  width: mainview.height / 4
                  height: mainview.width / 4
                  anchors.top: mainview.top
                  anchors.bottom: dataView.top
                  anchors.left: undefined
                  anchors.right: mainview.right
              }
          }
      ]
  }