Uploaded image for project: 'Camunda Optimize'
  1. Camunda Optimize
  2. OPT-1258

I can visualize a single number as progress bar

    Details

    • Type: Feature Request
    • Status: Done
    • Priority: L3 - Default
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.2.0-alpha1, 2.2.0
    • Component/s: frontend
    • Labels:
      None

      Description

      AT:

      • For single number reports, I can use the target value double-button
      • In the target value modal, there are two input fields
        • baseline
        • target
      • Based on the type of the single number report, these input fields can either be the usual number inputs or a duration input (value + unit).
      • Input fields are validated (both numbers must be positive numbers and the target must be greater than the baseline)
      • When the target value mode is active, the report is visualized as a Progress Bar, displaying the current value, the baseline and the target

        Issue Links

          Activity

          Hide
          johannes.heinemann Johannes Heinemann added a comment -

          Again it's outstanding what you achieve in such a short amount of time. It works really well

          Some review hints for improvement:

          • Choosing a duration number: you always get all units up the millisenconds shown. I think it would make sense to take the smallest unit from baseline and target and depict only up to one unit less than that.
          • Choosing a duration number: set the baseline value above the target value, then the small line on the left side of the baseline number is still dark blue although it should be light blue as well.
          • We need to style the progress bar a bit better. For me it's hard to recognize that this is actually a progress bar. Let's create a ticket for Franz.
          • Choosing a duration number: putting the report on a dashboard and making the report smaller will cause the number to overflow the progress bar. Maybe we should depict a ... if the text does not fit completely.
          • It could be nice to see the procentage of target value that has been reached. However, I don't know how to depict that. Should we create a ticket for that?
          • Number.js: I would extract the line typeof min === 'object' to a function called isDurationValue to make it a bit more transparent what the comparison is for.
          • NumberTargetValueModal.js: Again I would replace every comparison typeof foo === 'object' replace with a function called isDurationValue.
          • NumberTargetValueModal.js: I know you gonna hate me for this remark, but: I think it would make sense to use Higher Order Components here - one duration component and one frequency component. Then we can get rid of all the if else statements in general. But maybe it doesn't work as I imagine it. Let's discuss this.
          Show
          johannes.heinemann Johannes Heinemann added a comment - Again it's outstanding what you achieve in such a short amount of time. It works really well Some review hints for improvement: Choosing a duration number: you always get all units up the millisenconds shown. I think it would make sense to take the smallest unit from baseline and target and depict only up to one unit less than that. Choosing a duration number: set the baseline value above the target value, then the small line on the left side of the baseline number is still dark blue although it should be light blue as well. We need to style the progress bar a bit better. For me it's hard to recognize that this is actually a progress bar. Let's create a ticket for Franz. Choosing a duration number: putting the report on a dashboard and making the report smaller will cause the number to overflow the progress bar. Maybe we should depict a ... if the text does not fit completely. It could be nice to see the procentage of target value that has been reached. However, I don't know how to depict that. Should we create a ticket for that? Number.js: I would extract the line typeof min === 'object' to a function called isDurationValue to make it a bit more transparent what the comparison is for. NumberTargetValueModal.js: Again I would replace every comparison typeof foo === 'object' replace with a function called isDurationValue . NumberTargetValueModal.js: I know you gonna hate me for this remark, but: I think it would make sense to use Higher Order Components here - one duration component and one frequency component. Then we can get rid of all the if else statements in general. But maybe it doesn't work as I imagine it. Let's discuss this.
          Hide
          sebastian.stamm Sebastian Stamm added a comment -

          This feature should be documented in the user guide

          Show
          sebastian.stamm Sebastian Stamm added a comment - This feature should be documented in the user guide
          Hide
          sebastian.stamm Sebastian Stamm added a comment -

          Thanks for the feedback!

          I created tickets for tackling the display granularity of durations application-wide (OPT-1305) and improving the Progress Bar styling (OPT-1306). The other review hints I implemented. I also refactored the component hierarchy for the Target Value Modals. The Modal for the Progress Bar now includes two separate components responsible for the Inputs, depending on the type (number vs. duration).

          Show
          sebastian.stamm Sebastian Stamm added a comment - Thanks for the feedback! I created tickets for tackling the display granularity of durations application-wide ( OPT-1305 ) and improving the Progress Bar styling ( OPT-1306 ). The other review hints I implemented. I also refactored the component hierarchy for the Target Value Modals. The Modal for the Progress Bar now includes two separate components responsible for the Inputs, depending on the type (number vs. duration).
          Hide
          johannes.heinemann Johannes Heinemann added a comment -

          Pretty nice. I also like the refactoring. This way it is a lot nicer in my opinion

          Show
          johannes.heinemann Johannes Heinemann added a comment - Pretty nice. I also like the refactoring. This way it is a lot nicer in my opinion

            People

            • Assignee:
              Unassigned
              Reporter:
              sebastian.stamm Sebastian Stamm
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: