diff options
Diffstat (limited to 'examples/datavisualization/qmllegend/qml/qmllegend')
4 files changed, 487 insertions, 0 deletions
diff --git a/examples/datavisualization/qmllegend/qml/qmllegend/Data.qml b/examples/datavisualization/qmllegend/qml/qmllegend/Data.qml new file mode 100644 index 00000000..4681c61c --- /dev/null +++ b/examples/datavisualization/qmllegend/qml/qmllegend/Data.qml @@ -0,0 +1,78 @@ +/**************************************************************************** +** +** 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 + + ListModel { + id: dataModel + ListElement{ year: "2010"; month: "Jan"; s1: "-14"; s2: "-15"; s3: "-15" } + ListElement{ year: "2010"; month: "Feb"; s1: "-15"; s2: "-16"; s3: "-9" } + ListElement{ year: "2010"; month: "Mar"; s1: "-7"; s2: "-4"; s3: "-2" } + ListElement{ year: "2010"; month: "Apr"; s1: "3"; s2: "2"; s3: "2" } + ListElement{ year: "2010"; month: "May"; s1: "7"; s2: "9"; s3: "10" } + ListElement{ year: "2010"; month: "Jun"; s1: "12"; s2: "13"; s3: "22" } + ListElement{ year: "2010"; month: "Jul"; s1: "18"; s2: "19"; s3: "24" } + ListElement{ year: "2010"; month: "Aug"; s1: "15"; s2: "13"; s3: "16" } + ListElement{ year: "2010"; month: "Sep"; s1: "6"; s2: "3"; s3: "4" } + ListElement{ year: "2010"; month: "Oct"; s1: "1"; s2: "2"; s3: "-2" } + ListElement{ year: "2010"; month: "Nov"; s1: "-2"; s2: "-5"; s3: "-6" } + ListElement{ year: "2010"; month: "Dec"; s1: "-3"; s2: "-3"; s3: "-9" } + + ListElement{ year: "2011"; month: "Jan"; s1: "-12"; s2: "-11"; s3: "-14" } + ListElement{ year: "2011"; month: "Feb"; s1: "-13"; s2: "-12"; s3: "-10" } + ListElement{ year: "2011"; month: "Mar"; s1: "-6"; s2: "-4"; s3: "-3" } + ListElement{ year: "2011"; month: "Apr"; s1: "0"; s2: "1"; s3: "3" } + ListElement{ year: "2011"; month: "May"; s1: "4"; s2: "12"; s3: "11" } + ListElement{ year: "2011"; month: "Jun"; s1: "9"; s2: "17"; s3: "23" } + ListElement{ year: "2011"; month: "Jul"; s1: "15"; s2: "22"; s3: "25" } + ListElement{ year: "2011"; month: "Aug"; s1: "12"; s2: "15"; s3: "12" } + ListElement{ year: "2011"; month: "Sep"; s1: "2"; s2: "4"; s3: "7" } + ListElement{ year: "2011"; month: "Oct"; s1: "-2"; s2: "4"; s3: "-4" } + ListElement{ year: "2011"; month: "Nov"; s1: "-4"; s2: "-8"; s3: "-5" } + ListElement{ year: "2011"; month: "Dec"; s1: "-6"; s2: "-6"; s3: "-7" } + + ListElement{ year: "2012"; month: "Jan"; s1: "-10"; s2: "-19"; s3: "-11" } + ListElement{ year: "2012"; month: "Feb"; s1: "-11"; s2: "-17"; s3: "-4" } + ListElement{ year: "2012"; month: "Mar"; s1: "-6"; s2: "-3"; s3: "-1" } + ListElement{ year: "2012"; month: "Apr"; s1: "5"; s2: "1"; s3: "2" } + ListElement{ year: "2012"; month: "May"; s1: "9"; s2: "12"; s3: "13" } + ListElement{ year: "2012"; month: "Jun"; s1: "11"; s2: "16"; s3: "26" } + ListElement{ year: "2012"; month: "Jul"; s1: "18"; s2: "20"; s3: "23" } + ListElement{ year: "2012"; month: "Aug"; s1: "19"; s2: "12"; s3: "12" } + ListElement{ year: "2012"; month: "Sep"; s1: "9"; s2: "1"; s3: "3" } + ListElement{ year: "2012"; month: "Oct"; s1: "-3"; s2: "2"; s3: "-1" } + ListElement{ year: "2012"; month: "Nov"; s1: "-5"; s2: "-4"; s3: "-3" } + ListElement{ year: "2012"; month: "Dec"; s1: "-7"; s2: "-2"; s3: "-4" } + + ListElement{ year: "2013"; month: "Jan"; s1: "-18"; s2: "-19"; s3: "-19" } + ListElement{ year: "2013"; month: "Feb"; s1: "-17"; s2: "-19"; s3: "-12" } + ListElement{ year: "2013"; month: "Mar"; s1: "-9"; s2: "-6"; s3: "-5" } + ListElement{ year: "2013"; month: "Apr"; s1: "0"; s2: "0"; s3: "0" } + ListElement{ year: "2013"; month: "May"; s1: "4"; s2: "7"; s3: "9" } + ListElement{ year: "2013"; month: "Jun"; s1: "9"; s2: "11"; s3: "18" } + ListElement{ year: "2013"; month: "Jul"; s1: "13"; s2: "15"; s3: "20" } + ListElement{ year: "2013"; month: "Aug"; s1: "10"; s2: "11"; s3: "13" } + ListElement{ year: "2013"; month: "Sep"; s1: "3"; s2: "1"; s3: "2" } + ListElement{ year: "2013"; month: "Oct"; s1: "0"; s2: "1"; s3: "-4" } + ListElement{ year: "2013"; month: "Nov"; s1: "-5"; s2: "-6"; s3: "-5" } + ListElement{ year: "2013"; month: "Dec"; s1: "-6"; s2: "-7"; s3: "-10" } + } +} diff --git a/examples/datavisualization/qmllegend/qml/qmllegend/LegendItem.qml b/examples/datavisualization/qmllegend/qml/qmllegend/LegendItem.qml new file mode 100644 index 00000000..50be7a8d --- /dev/null +++ b/examples/datavisualization/qmllegend/qml/qmllegend/LegendItem.qml @@ -0,0 +1,118 @@ +/**************************************************************************** +** +** 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.Layouts 1.0 +import QtQuick.Window 2.1 +import QtDataVisualization 1.0 + +Rectangle { + //! [0] + property Theme3D theme + property Bar3DSeries series + //! [0] + property point previousSelection + + id: legendItem + state: "unselected" + + //! [1] + RowLayout { + anchors.fill: parent + spacing: 0 + clip: true + Item { + id: markerSpace + Layout.minimumWidth: 20 + Layout.minimumHeight: 20 + Layout.fillWidth: true + Layout.fillHeight: true + Layout.alignment: Qt.AlignVCenter + Rectangle { + x: parent.x + parent.width / 4 + y: parent.y + parent.height / 4 + width: parent.width / 2 + height: width + border.color: "black" + color: series.baseColor + } + } + Item { + height: markerSpace.height + Layout.fillWidth: true + Layout.fillHeight: true + Layout.alignment: Qt.AlignVCenter + Layout.minimumWidth: 100 + Text { + anchors.fill: parent + text: series.name + verticalAlignment: Text.AlignVCenter + clip: true + color: theme.labelTextColor + font: theme.font + } + } + } + //! [1] + + //! [2] + MouseArea { + id: mouseArea + anchors.fill: legendItem + onClicked: { + if (legendItem.state === "selected") { + series.selectedBar = series.invalidSelectionPosition + } else { + series.selectedBar = previousSelection + } + } + } + //! [2] + + //! [4] + Connections { + target: series + onSelectedBarChanged: { + if (position != series.invalidSelectionPosition) { + previousSelection = position + } + } + } + //! [4] + + //! [3] + states: [ + State { + name: "selected" + when: series.selectedBar != series.invalidSelectionPosition + PropertyChanges { + target: legendItem + color: series.singleHighlightColor + } + }, + State { + name: "unselected" + when: series.selectedBar == series.invalidSelectionPosition + PropertyChanges { + target: legendItem + color: theme.labelBackgroundColor + } + } + ] + //! [3] +} diff --git a/examples/datavisualization/qmllegend/qml/qmllegend/NewButton.qml b/examples/datavisualization/qmllegend/qml/qmllegend/NewButton.qml new file mode 100644 index 00000000..e4fb99d2 --- /dev/null +++ b/examples/datavisualization/qmllegend/qml/qmllegend/NewButton.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 QtQuick.Controls 1.0 +import QtQuick.Controls.Styles 1.0 + +Item { + id: newbutton + + property alias text: buttonText.text + + signal clicked + + implicitWidth: buttonText.implicitWidth + 5 + implicitHeight: buttonText.implicitHeight + 10 + + Button { + id: buttonText + width: parent.width + height: parent.height + + style: ButtonStyle { + label: Component { + Text { + text: buttonText.text + clip: true + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + anchors.fill: parent + } + } + } + onClicked: newbutton.clicked() + } +} diff --git a/examples/datavisualization/qmllegend/qml/qmllegend/main.qml b/examples/datavisualization/qmllegend/qml/qmllegend/main.qml new file mode 100644 index 00000000..6c488d6a --- /dev/null +++ b/examples/datavisualization/qmllegend/qml/qmllegend/main.qml @@ -0,0 +1,239 @@ +/**************************************************************************** +** +** 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 "." + +Item { + 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.top: buttonLayout.bottom + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.right: parent.right + + 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 + + id: legendPanel + width: 200 + height: 100 + border.color: barGraph.theme.labelTextColor + border.width: 2 + color: "#00000000" // Transparent + + //! [0] + 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 + onColorChanged: legendPanel.relayout() + } + LegendItem { + Layout.fillWidth: true + Layout.fillHeight: true + series: station2 + theme: barGraph.theme + onColorChanged: legendPanel.relayout() + } + LegendItem { + Layout.fillWidth: true + Layout.fillHeight: true + series: station3 + theme: barGraph.theme + onColorChanged: legendPanel.relayout() + } + } + //! [0] + + function relayout() { + // Workaround for a layout bug that causes transparent colors to use black background + // instead of what is actually under the items if just the color changes. + // Forcing a relayout by adjusting layout's available area fixes the background. + var originalWidth = border.width + border.width = originalWidth + 1 + border.width = originalWidth + } + + states: [ + State { + name: "topleft" + when: legendPanel.legendLocation === 1 + AnchorChanges { + target: legendPanel + anchors.top: dataView.top + anchors.bottom: undefined + anchors.left: dataView.left + anchors.right: undefined + } + }, + State { + name: "topright" + when: legendPanel.legendLocation === 2 + AnchorChanges { + target: legendPanel + anchors.top: dataView.top + 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); + } + } + +} |