diff options
Diffstat (limited to 'tests/manual/qmlbarsrowcolors/qml')
3 files changed, 551 insertions, 0 deletions
diff --git a/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml new file mode 100644 index 00000000..0e021c34 --- /dev/null +++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Axes.qml @@ -0,0 +1,41 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtDataVisualization + +Item { + property alias column: columnAxis + property alias row: rowAxis + property alias value: valueAxis + property alias total: totalAxis + + // 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"] + labelAutoRotation: 30 + } + //! [0] + CategoryAxis3D { + id: totalAxis + labels: ["Yearly total"] + labelAutoRotation: 30 + } + CategoryAxis3D { + // For row labels we can use row labels from data proxy, no labels defined for rows. + id: rowAxis + labelAutoRotation: 30 + } + + ValueAxis3D { + id: valueAxis + min: 0 + max: 35 + labelFormat: "%.2f M\u20AC" + title: "Monthly income" + labelAutoRotation: 90 + } +} diff --git a/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml new file mode 100644 index 00000000..6eb27741 --- /dev/null +++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/Data.qml @@ -0,0 +1,118 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtQml.Models + +Item { + property alias model: dataModel + + property var modelAsJsArray: { + var arr = [] + for (var i = 0; i < dataModel.count; i++) { + var row = dataModel.get(i) + arr.push({ + timestamp: row.timestamp, + expenses: row.expenses, + income: row.income + }) + } + return arr + } + + //! [0] + ListModel { + id: dataModel + ListElement{ timestamp: "2006-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2006-02"; expenses: "-5"; income: "6" } + ListElement{ timestamp: "2006-03"; expenses: "-7"; income: "4" } + //! [0] + ListElement{ timestamp: "2006-04"; expenses: "-3"; income: "2" } + ListElement{ timestamp: "2006-05"; expenses: "-4"; income: "1" } + ListElement{ timestamp: "2006-06"; expenses: "-2"; income: "2" } + ListElement{ timestamp: "2006-07"; expenses: "-1"; income: "3" } + ListElement{ timestamp: "2006-08"; expenses: "-5"; income: "1" } + ListElement{ timestamp: "2006-09"; expenses: "-2"; income: "3" } + ListElement{ timestamp: "2006-10"; expenses: "-5"; income: "2" } + ListElement{ timestamp: "2006-11"; expenses: "-8"; income: "5" } + ListElement{ timestamp: "2006-12"; expenses: "-3"; income: "3" } + + ListElement{ timestamp: "2007-01"; expenses: "-3"; income: "1" } + ListElement{ timestamp: "2007-02"; expenses: "-4"; income: "2" } + ListElement{ timestamp: "2007-03"; expenses: "-12"; income: "4" } + ListElement{ timestamp: "2007-04"; expenses: "-13"; income: "6" } + ListElement{ timestamp: "2007-05"; expenses: "-14"; income: "11" } + ListElement{ timestamp: "2007-06"; expenses: "-7"; income: "7" } + ListElement{ timestamp: "2007-07"; expenses: "-6"; income: "4" } + ListElement{ timestamp: "2007-08"; expenses: "-4"; income: "15" } + ListElement{ timestamp: "2007-09"; expenses: "-2"; income: "18" } + ListElement{ timestamp: "2007-10"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2007-11"; expenses: "-23"; income: "29" } + ListElement{ timestamp: "2007-12"; expenses: "-5"; income: "9" } + + ListElement{ timestamp: "2008-01"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2008-02"; expenses: "-8"; income: "14" } + ListElement{ timestamp: "2008-03"; expenses: "-10"; income: "20" } + ListElement{ timestamp: "2008-04"; expenses: "-12"; income: "24" } + ListElement{ timestamp: "2008-05"; expenses: "-10"; income: "19" } + ListElement{ timestamp: "2008-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2008-07"; expenses: "-1"; income: "4" } + ListElement{ timestamp: "2008-08"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2008-09"; expenses: "-4"; income: "16" } + ListElement{ timestamp: "2008-10"; expenses: "-22"; income: "33" } + ListElement{ timestamp: "2008-11"; expenses: "-16"; income: "25" } + ListElement{ timestamp: "2008-12"; expenses: "-2"; income: "7" } + + ListElement{ timestamp: "2009-01"; expenses: "-4"; income: "5" } + ListElement{ timestamp: "2009-02"; expenses: "-4"; income: "7" } + ListElement{ timestamp: "2009-03"; expenses: "-11"; income: "14" } + ListElement{ timestamp: "2009-04"; expenses: "-16"; income: "22" } + ListElement{ timestamp: "2009-05"; expenses: "-3"; income: "5" } + ListElement{ timestamp: "2009-06"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2009-07"; expenses: "-7"; income: "9" } + ListElement{ timestamp: "2009-08"; expenses: "-9"; income: "13" } + ListElement{ timestamp: "2009-09"; expenses: "-1"; income: "6" } + ListElement{ timestamp: "2009-10"; expenses: "-14"; income: "25" } + ListElement{ timestamp: "2009-11"; expenses: "-19"; income: "29" } + ListElement{ timestamp: "2009-12"; expenses: "-5"; income: "7" } + + ListElement{ timestamp: "2010-01"; expenses: "-14"; income: "22" } + ListElement{ timestamp: "2010-02"; expenses: "-5"; income: "7" } + ListElement{ timestamp: "2010-03"; expenses: "-1"; income: "9" } + ListElement{ timestamp: "2010-04"; expenses: "-1"; income: "12" } + ListElement{ timestamp: "2010-05"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2010-06"; expenses: "-5"; income: "8" } + ListElement{ timestamp: "2010-07"; expenses: "-3"; income: "7" } + ListElement{ timestamp: "2010-08"; expenses: "-1"; income: "5" } + ListElement{ timestamp: "2010-09"; expenses: "-2"; income: "4" } + ListElement{ timestamp: "2010-10"; expenses: "-10"; income: "13" } + ListElement{ timestamp: "2010-11"; expenses: "-12"; income: "17" } + ListElement{ timestamp: "2010-12"; expenses: "-6"; income: "9" } + + ListElement{ timestamp: "2011-01"; expenses: "-2"; income: "6" } + ListElement{ timestamp: "2011-02"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2011-03"; expenses: "-7"; income: "12" } + ListElement{ timestamp: "2011-04"; expenses: "-9"; income: "15" } + ListElement{ timestamp: "2011-05"; expenses: "-7"; income: "19" } + ListElement{ timestamp: "2011-06"; expenses: "-9"; income: "18" } + ListElement{ timestamp: "2011-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2011-08"; expenses: "-5"; income: "9" } + ListElement{ timestamp: "2011-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2011-10"; expenses: "-13"; income: "15" } + ListElement{ timestamp: "2011-11"; expenses: "-8"; income: "17" } + ListElement{ timestamp: "2011-12"; expenses: "-7"; income: "10" } + + ListElement{ timestamp: "2012-01"; expenses: "-12"; income: "16" } + ListElement{ timestamp: "2012-02"; expenses: "-24"; income: "28" } + ListElement{ timestamp: "2012-03"; expenses: "-27"; income: "22" } + ListElement{ timestamp: "2012-04"; expenses: "-29"; income: "25" } + ListElement{ timestamp: "2012-05"; expenses: "-27"; income: "29" } + ListElement{ timestamp: "2012-06"; expenses: "-19"; income: "18" } + ListElement{ timestamp: "2012-07"; expenses: "-13"; income: "17" } + ListElement{ timestamp: "2012-08"; expenses: "-15"; income: "19" } + ListElement{ timestamp: "2012-09"; expenses: "-3"; income: "8" } + ListElement{ timestamp: "2012-10"; expenses: "-3"; income: "6" } + ListElement{ timestamp: "2012-11"; expenses: "-4"; income: "8" } + ListElement{ timestamp: "2012-12"; expenses: "-5"; income: "9" } + } +} diff --git a/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml new file mode 100644 index 00000000..2f15b453 --- /dev/null +++ b/tests/manual/qmlbarsrowcolors/qml/qmlbarsrowcolors/main.qml @@ -0,0 +1,392 @@ +// Copyright (C) 2021 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only + +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import QtDataVisualization +import QtQuick.Window +import Qt.labs.qmlmodels +import "." + +Item { + id: mainview + + property int buttonLayoutHeight: 180; + property int currentRow + property Bar3DSeries selectedSeries + + function toggleRowColorsForBarSeries(enable) { + if (enable) + barSeries.rowColors = [color1, color2, color3] + else + barSeries.rowColors = [] + } + + function toggleRowColorsForSecondarySeries(enable) { + if (enable) + secondarySeries.rowColors = [color4, color5, color6] + else + secondarySeries.rowColors = [] + } + + 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 + + if (currentRow === -1 || checkTimestamp !== graphData.model.get(currentRow).timestamp) { + var totalRows = tableView.rows; + for (var i = 0; i < totalRows; i++) { + var modelTimestamp = graphData.model.get(i).timestamp + if (modelTimestamp === checkTimestamp) { + currentRow = i + break + } + } + } + } + + width: 1280 + height: 1024 + + state: Screen.width < Screen.height ? "portrait" : "landscape" + selectedSeries: barSeries + + 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) + } + + Data { + id: graphData + } + + Axes { + id: graphAxes + } + + ThemeColor { + id: color1 + color: "green" + } + + ThemeColor { + id: color2 + color: "blue" + } + + ThemeColor { + id: color3 + color: "red" + } + + ThemeColor { + id: color4 + color: "yellow" + } + + ThemeColor { + id: color5 + color: "purple" + } + + ThemeColor { + id: color6 + color: "orange" + } + + Theme3D { + id: theme1 + type: Theme3D.ThemeRetro + labelBorderEnabled: true + font.pointSize: 35 + labelBackgroundEnabled: true + colorStyle: Theme3D.ColorStyleUniform + } + + Theme3D { + id: theme2 + type: Theme3D.ThemeArmyBlue + labelBorderEnabled: true + font.pointSize: 35 + labelBackgroundEnabled: true + colorStyle: Theme3D.ColorStyleUniform + } + + 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: theme1 + 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" + rowColors: [color4 , color5, color6] + + onSelectedBarChanged: (position)=> handleSelectionChange(secondarySeries, position) + + 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 + } + } + + Bar3DSeries { + id: barSeries + itemLabelFormat: "Income, @colLabel, @rowLabel: @valueLabel" + rowColors: [color1, color2, color3] + + onSelectedBarChanged: (position)=> handleSelectionChange(barSeries, position) + + 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 + } + } + } + } + + ColumnLayout { + id: tableViewLayout + + anchors.top: parent.top + anchors.left: parent.left + + HorizontalHeaderView { + id: header + property var columnNames: ["Month", "Expenses", "Income"] + + syncView: tableView + Layout.fillWidth: true + delegate: Text { + padding: 3 + text: header.columnNames[index] + } + + } + + TableView { + id: tableView + Layout.fillWidth: true + Layout.fillHeight: true + + reuseItems: false + clip: true + + model: TableModel { + id: tableModel + TableModelColumn { display: "timestamp" } + TableModelColumn { display: "expenses" } + TableModelColumn { display: "income" } + + rows: graphData.modelAsJsArray + } + + delegate: Rectangle { + implicitHeight: 30 + implicitWidth: tableView.width / 3 + color: row === currentRow ? "#e0e0e0" : "#ffffff" + MouseArea { + anchors.fill: parent + onClicked: currentRow = row + } + + Text { + id: delegateText + anchors.verticalCenter: parent.verticalCenter + width: parent.width + anchors.leftMargin: 4 + anchors.left: parent.left + anchors.right: parent.right + text: formattedText + property string formattedText: { + if (column === 0) { + if (display !== "") { + var pattern = /(\d\d\d\d)-(\d\d)/ + var matches = pattern.exec(display) + var colIndex = parseInt(matches[2], 10) - 1 + return matches[1] + " - " + graphAxes.column.labels[colIndex] + } + } else { + return display + } + } + } + } + } + } + + ColumnLayout { + id: controlLayout + spacing: 0 + + 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" + } + } + } + + Button { + id: themeToggle + Layout.fillWidth: true + Layout.fillHeight: true + text: "Use theme 2" + clip: true + + onClicked: { + if (text === "Use theme 2") { + barGraph.theme = theme2 + text = "Use theme 1" + } else { + barGraph.theme = theme1 + text = "Use theme 2" + } + } + } + + Button { + id: barSeriesRowColorToggle + Layout.fillWidth: true + Layout.fillHeight: true + text: "Disable row colors" + + onClicked: { + if (text === "Disable row colors") { + toggleRowColorsForBarSeries(false) + toggleRowColorsForSecondarySeries(false) + text = "Enable row colors" + } else { + toggleRowColorsForBarSeries(true) + toggleRowColorsForSecondarySeries(true) + text = "Disable row colors" + } + } + } + } + + states: [ + State { + name: "landscape" + PropertyChanges { + target: dataView + width: mainview.width / 4 * 3 + height: mainview.height + } + PropertyChanges { + target: tableViewLayout + 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: tableViewLayout.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: tableViewLayout + 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 + } + } + ] +} |