Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-129371

Better spacing for Bars3D elements

XMLWordPrintable

    • 028dbbb4d (dev)

      While we understandably do not recommend excessive numbers of rows/columns, Bars3D can still have better (and configurable) ways to space/layout its visual elements.

       

      Code

      (Adapted from https://doc.qt.io/qt-6/qml-qtgraphs-bars3d.html#details)

      import QtQuick
      import QtQuick.Controls.Basic
      import QtGraphs
      
      ApplicationWindow {
          id: root
          width: 800
          height: 600
          visibility: Window.FullScreen
          visible: true
      
          property int year: 2024
      
          header: Row {
              spacing: 10
      
              Button {
                  text: "More Data"
                  onClicked: {
                      for (let i = 0; i < 5; ++i) {
                          dataModel.append({ year: root.year, city: "Oulu", expenses: 4000 })
                          dataModel.append({ year: root.year, city: "Helsinki", expenses: 8000 })
                          root.year += 1
                      }
                  }
              }
              Column {
                  Label { text: "Zoom level: " + bars.cameraZoomLevel }
                  Label { text: "Label count:" + bars.rowAxis.labels.length }
              }
              Slider {
                  id: thicknessSlider
                  from: 0.1
                  value: 1
                  to: 10
              }
              Switch {
                  id: spacingRelativeSwitch
                  text: "Spacing Relative"
              }
          }
      
      
          ListModel {
              id: dataModel
              ListElement{ year: 2022; city: "Oulu";     expenses: 4000; }
              ListElement{ year: 2022; city: "Helsinki"; expenses: 8000; }
              ListElement{ year: 2023; city: "Oulu";     expenses: 4000; }
              ListElement{ year: 2023; city: "Helsinki"; expenses: 8000; }
          }
      
          Bars3D {
              id: bars
              anchors.fill: parent
              barSpacingRelative: spacingRelativeSwitch.checked
              barThickness: thicknessSlider.value
      
              Bar3DSeries {
                  itemLabelFormat: "@colLabel, @rowLabel: @valueLabel"
      
                  ItemModelBarDataProxy {
                      itemModel: dataModel
                      columnRole: "city"
                      rowRole: "year"
                      valueRole: "expenses"
                  }
              }
          }
      }
      
      

       

      Steps to reproduce

      1. Run the code above
      2. Rotate the camera around and zoom in/out to try to read the labels
      3. Click "More Data" to add more data (the "Label count" will increase)
      4. Repeat Steps #2 and #3 several times

       

      Outcomes/Observations

      Label count Observations
      2 The label widths are too tiny with respect to the bar widths
      12 The label widths and bar widths are more balanced now
      52 The labels are starting to meld into each other. The bars are too tall with respect to their widths
      102 Most labels can no longer be read

      In general, as more rows/columns are added, the bar widths get smaller and smaller, while the bar heights remain unchanged (as if to make them fit inside a fixed bounding box/volume)

      Note: By setting a high value for Bars3D.barThickness and by enabling Bars3D.barSpacingRelative, we can move the "Oulu" and "Helsinki" labels apart from each other when the row/column count is high. However, there is no equivalent option for moving the year labels apart.

       

      Suggestions

      • By default, the label sizes should be relative to the bar sizes.
      • When more rows/columns are added, instead of making the bar widths smaller, there should be an option to keep the bar widths unchanged while expanding the "bounding box". In tandem, there should be an option to pan/traslate the camera (using a WasdController, for example) 

        1. labelCount-102.png
          labelCount-102.png
          593 kB
        2. labelCount-12.png
          labelCount-12.png
          178 kB
        3. labelCount-2.png
          labelCount-2.png
          99 kB
        4. labelCount-52.png
          labelCount-52.png
          322 kB
        For Gerrit Dashboard: QTBUG-129371
        # Subject Branch Project Status CR V

            spouke Sakaria Pouke
            skoh-qt Sze Howe Koh
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                There are no open Gerrit changes