From 88cd10aa7b3559b092cf5575b0a17d002dc100ae Mon Sep 17 00:00:00 2001 From: Miikka Heikkinen Date: Thu, 13 Feb 2014 09:59:52 +0200 Subject: Fix examples installation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Had to add one folder to the examples structure so installation works correctly. Change-Id: Ic92dfe9997413a6243abcf5eeba12744ba9e938c Reviewed-by: Tomi Korpipää --- .../datavisualization/qmlbars/qml/qmlbars/Axes.qml | 52 ++++ .../datavisualization/qmlbars/qml/qmlbars/Data.qml | 119 ++++++++ .../datavisualization/qmlbars/qml/qmlbars/main.qml | 303 +++++++++++++++++++++ 3 files changed, 474 insertions(+) create mode 100644 examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml create mode 100644 examples/datavisualization/qmlbars/qml/qmlbars/Data.qml create mode 100644 examples/datavisualization/qmlbars/qml/qmlbars/main.qml (limited to 'examples/datavisualization/qmlbars/qml') diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml new file mode 100644 index 00000000..29979e1b --- /dev/null +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Axes.qml @@ -0,0 +1,52 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtDataVisualization module. +** +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** +****************************************************************************/ + +import QtQuick 2.1 +import QtDataVisualization 1.0 + +Item { + property alias column: columnAxis + property alias expenses: expensesAxis + property alias income: incomeAxis + + // For row labels we can use row labels from data proxy, so default axis + // suffices for rows. + + // Custom labels for columns, since the data contains abbreviated month names. + //! [0] + CategoryAxis3D { + id: columnAxis + labels: ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"] + } + //! [0] + ValueAxis3D { + id: incomeAxis + min: 0 + max: 35 + labelFormat: "%.2f M\u20AC" + title: "Monthly income" + } + ValueAxis3D { + id: expensesAxis + min: 0 + max: 35 + labelFormat: "-%.2f M\u20AC" + title: "Monthly expenses" + } +} diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml new file mode 100644 index 00000000..7e0978c6 --- /dev/null +++ b/examples/datavisualization/qmlbars/qml/qmlbars/Data.qml @@ -0,0 +1,119 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtDataVisualization module. +** +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** +****************************************************************************/ + +import QtQuick 2.1 + +Item { + property alias model: dataModel + + //! [0] + ListModel { + id: dataModel + ListElement{ year: "2006"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2006"; month: "Feb"; expenses: "5"; income: "6" } + ListElement{ year: "2006"; month: "Mar"; expenses: "7"; income: "4" } + //! [0] + ListElement{ year: "2006"; month: "Apr"; expenses: "3"; income: "2" } + ListElement{ year: "2006"; month: "May"; expenses: "4"; income: "1" } + ListElement{ year: "2006"; month: "Jun"; expenses: "2"; income: "2" } + ListElement{ year: "2006"; month: "Jul"; expenses: "1"; income: "3" } + ListElement{ year: "2006"; month: "Aug"; expenses: "5"; income: "1" } + ListElement{ year: "2006"; month: "Sep"; expenses: "2"; income: "3" } + ListElement{ year: "2006"; month: "Oct"; expenses: "5"; income: "2" } + ListElement{ year: "2006"; month: "Nov"; expenses: "8"; income: "5" } + ListElement{ year: "2006"; month: "Dec"; expenses: "3"; income: "3" } + + ListElement{ year: "2007"; month: "Jan"; expenses: "3"; income: "1" } + ListElement{ year: "2007"; month: "Feb"; expenses: "4"; income: "2" } + ListElement{ year: "2007"; month: "Mar"; expenses: "12"; income: "4" } + ListElement{ year: "2007"; month: "Apr"; expenses: "13"; income: "6" } + ListElement{ year: "2007"; month: "May"; expenses: "14"; income: "11" } + ListElement{ year: "2007"; month: "Jun"; expenses: "7"; income: "7" } + ListElement{ year: "2007"; month: "Jul"; expenses: "6"; income: "4" } + ListElement{ year: "2007"; month: "Aug"; expenses: "4"; income: "15" } + ListElement{ year: "2007"; month: "Sep"; expenses: "2"; income: "18" } + ListElement{ year: "2007"; month: "Oct"; expenses: "29"; income: "25" } + ListElement{ year: "2007"; month: "Nov"; expenses: "23"; income: "29" } + ListElement{ year: "2007"; month: "Dec"; expenses: "5"; income: "9" } + + ListElement{ year: "2008"; month: "Jan"; expenses: "3"; income: "8" } + ListElement{ year: "2008"; month: "Feb"; expenses: "8"; income: "14" } + ListElement{ year: "2008"; month: "Mar"; expenses: "10"; income: "20" } + ListElement{ year: "2008"; month: "Apr"; expenses: "12"; income: "24" } + ListElement{ year: "2008"; month: "May"; expenses: "10"; income: "19" } + ListElement{ year: "2008"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2008"; month: "Jul"; expenses: "1"; income: "4" } + ListElement{ year: "2008"; month: "Aug"; expenses: "7"; income: "12" } + ListElement{ year: "2008"; month: "Sep"; expenses: "4"; income: "16" } + ListElement{ year: "2008"; month: "Oct"; expenses: "22"; income: "33" } + ListElement{ year: "2008"; month: "Nov"; expenses: "16"; income: "25" } + ListElement{ year: "2008"; month: "Dec"; expenses: "2"; income: "7" } + + ListElement{ year: "2009"; month: "Jan"; expenses: "4"; income: "5" } + ListElement{ year: "2009"; month: "Feb"; expenses: "4"; income: "7" } + ListElement{ year: "2009"; month: "Mar"; expenses: "11"; income: "14" } + ListElement{ year: "2009"; month: "Apr"; expenses: "16"; income: "22" } + ListElement{ year: "2009"; month: "May"; expenses: "3"; income: "5" } + ListElement{ year: "2009"; month: "Jun"; expenses: "4"; income: "8" } + ListElement{ year: "2009"; month: "Jul"; expenses: "7"; income: "9" } + ListElement{ year: "2009"; month: "Aug"; expenses: "9"; income: "13" } + ListElement{ year: "2009"; month: "Sep"; expenses: "1"; income: "6" } + ListElement{ year: "2009"; month: "Oct"; expenses: "14"; income: "25" } + ListElement{ year: "2009"; month: "Nov"; expenses: "19"; income: "29" } + ListElement{ year: "2009"; month: "Dec"; expenses: "5"; income: "7" } + + ListElement{ year: "2010"; month: "Jan"; expenses: "14"; income: "22" } + ListElement{ year: "2010"; month: "Feb"; expenses: "5"; income: "7" } + ListElement{ year: "2010"; month: "Mar"; expenses: "1"; income: "9" } + ListElement{ year: "2010"; month: "Apr"; expenses: "1"; income: "12" } + ListElement{ year: "2010"; month: "May"; expenses: "5"; income: "9" } + ListElement{ year: "2010"; month: "Jun"; expenses: "5"; income: "8" } + ListElement{ year: "2010"; month: "Jul"; expenses: "3"; income: "7" } + ListElement{ year: "2010"; month: "Aug"; expenses: "1"; income: "5" } + ListElement{ year: "2010"; month: "Sep"; expenses: "2"; income: "4" } + ListElement{ year: "2010"; month: "Oct"; expenses: "10"; income: "13" } + ListElement{ year: "2010"; month: "Nov"; expenses: "12"; income: "17" } + ListElement{ year: "2010"; month: "Dec"; expenses: "6"; income: "9" } + + ListElement{ year: "2011"; month: "Jan"; expenses: "2"; income: "6" } + ListElement{ year: "2011"; month: "Feb"; expenses: "4"; income: "8" } + ListElement{ year: "2011"; month: "Mar"; expenses: "7"; income: "12" } + ListElement{ year: "2011"; month: "Apr"; expenses: "9"; income: "15" } + ListElement{ year: "2011"; month: "May"; expenses: "7"; income: "19" } + ListElement{ year: "2011"; month: "Jun"; expenses: "9"; income: "18" } + ListElement{ year: "2011"; month: "Jul"; expenses: "13"; income: "17" } + ListElement{ year: "2011"; month: "Aug"; expenses: "5"; income: "9" } + ListElement{ year: "2011"; month: "Sep"; expenses: "3"; income: "8" } + ListElement{ year: "2011"; month: "Oct"; expenses: "13"; income: "15" } + ListElement{ year: "2011"; month: "Nov"; expenses: "8"; income: "17" } + ListElement{ year: "2011"; month: "Dec"; expenses: "7"; income: "10" } + + ListElement{ year: "2012"; month: "Jan"; expenses: "12"; income: "16" } + ListElement{ year: "2012"; month: "Feb"; expenses: "24"; income: "28" } + ListElement{ year: "2012"; month: "Mar"; expenses: "27"; income: "22" } + ListElement{ year: "2012"; month: "Apr"; expenses: "29"; income: "25" } + ListElement{ year: "2012"; month: "May"; expenses: "27"; income: "29" } + ListElement{ year: "2012"; month: "Jun"; expenses: "19"; income: "18" } + ListElement{ year: "2012"; month: "Jul"; expenses: "13"; income: "17" } + ListElement{ year: "2012"; month: "Aug"; expenses: "15"; income: "19" } + ListElement{ year: "2012"; month: "Sep"; expenses: "3"; income: "8" } + ListElement{ year: "2012"; month: "Oct"; expenses: "3"; income: "6" } + ListElement{ year: "2012"; month: "Nov"; expenses: "4"; income: "8" } + ListElement{ year: "2012"; month: "Dec"; expenses: "5"; income: "9" } + } +} diff --git a/examples/datavisualization/qmlbars/qml/qmlbars/main.qml b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml new file mode 100644 index 00000000..0ff060ca --- /dev/null +++ b/examples/datavisualization/qmlbars/qml/qmlbars/main.qml @@ -0,0 +1,303 @@ +/**************************************************************************** +** +** Copyright (C) 2014 Digia Plc +** All rights reserved. +** For any questions to Digia, please use contact form at http://qt.digia.com +** +** This file is part of the QtDataVisualization module. +** +** Licensees holding valid Qt Enterprise licenses may use this file in +** accordance with the Qt Enterprise License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and Digia. +** +** If you have questions regarding the use of this file, please use +** contact form at http://qt.digia.com +** +****************************************************************************/ + +import QtQuick 2.1 +import QtQuick.Controls 1.0 +import QtQuick.Layouts 1.0 +import QtDataVisualization 1.0 +import QtQuick.Window 2.0 +import "." + +Item { + 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 = series.dataProxy.columnLabels[position.y]; + var currentRow = tableView.currentRow + if (currentRow === -1 || rowRole !== graphData.model.get(currentRow).year + || colRole !== graphData.model.get(currentRow).month) { + var totalRows = tableView.rowCount; + for (var i = 0; i < totalRows; i++) { + var currentRowRole = graphData.model.get(i).year + var currentColRole = graphData.model.get(i).month + if (currentRowRole === rowRole && currentColRole === colRole) { + 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 + valueAxis: graphAxes.income + + //! [3] + Bar3DSeries { + id: barSeries + itemLabelFormat: "Income for @colLabel, @rowLabel: @valueLabel" + baseGradient: barGradient + + ItemModelBarDataProxy { + id: modelProxy + itemModel: graphData.model + rowRole: "year" + columnRole: "month" + valueRole: "income" + } + //! [3] + + ColorGradient { + id: barGradient + ColorGradientStop { position: 1.0; color: "#00FF00" } + ColorGradientStop { position: 0.0; color: "#006000" } + } + + onSelectedBarChanged: handleSelectionChange(barSeries, position) + } + + //! [4] + Bar3DSeries { + id: secondarySeries + visible: false + itemLabelFormat: "Expenses for @colLabel, @rowLabel: @valueLabel" + baseGradient: secondaryGradient + + ItemModelBarDataProxy { + id: secondaryProxy + itemModel: graphData.model + rowRole: "year" + columnRole: "month" + valueRole: "expenses" + } + //! [4] + + ColorGradient { + id: secondaryGradient + ColorGradientStop { position: 1.0; color: "#FF0000" } + ColorGradientStop { position: 0.0; color: "#600000" } + } + + onSelectedBarChanged: handleSelectionChange(secondarySeries, position) + } + } + } + + TableView { + id: tableView + anchors.top: parent.top + anchors.left: parent.left + TableViewColumn{ role: "year" ; title: "Year" ; width: tableView.width / 4 } + TableViewColumn{ role: "month" ; title: "Month" ; width: tableView.width / 4 } + TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: tableView.width / 4 } + TableViewColumn{ role: "income" ; title: "Income" ; width: tableView.width / 4 } + model: graphData.model + + //! [2] + onCurrentRowChanged: { + var rowIndex = modelProxy.rowCategoryIndex(graphData.model.get(currentRow).year) + var colIndex = modelProxy.columnCategoryIndex(graphData.model.get(currentRow).month) + 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) + } + //! [2] + } + + ColumnLayout { + id: controlLayout + spacing: 0 + + Button { + id: dataToggle + Layout.fillWidth: true + Layout.fillHeight: true + text: "Show 2010 - 2012" + clip: true + //! [1] + onClicked: { + if (barGraph.rowAxis.max !== 6) { + text = "Show 2010 - 2012" + modelProxy.autoRowCategories = true + secondaryProxy.autoRowCategories = true + } else { + text = "Show all years" + // 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"] + } + } + //! [1] + } + + Button { + id: shadowToggle + Layout.fillWidth: true + Layout.fillHeight: true + text: "Hide Shadows" + clip: true + 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 + //! [0] + onClicked: { + if (!secondarySeries.visible) { + text = "Show Both" + barGraph.valueAxis = graphAxes.expenses + barSeries.visible = false + secondarySeries.visible = true + } else if (!barSeries.visible){ + barSeries.visible = true + text = "Show Income" + barGraph.valueAxis = graphAxes.income + } else { + secondarySeries.visible = false + text = "Show Expenses" + barGraph.valueAxis = graphAxes.income + } + } + //! [0] + } + } + + 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 + } + } + ] +} -- cgit v1.2.3