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

I can set a goal line in the process instance bar chart

    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:

      • I can set a target value for all reports with visualization set to bar chart
      • The target can be configured like in the number report using the target double button
      • Pressing the target button the first time a modal opens where I can set the target value and if the actual values should be below or above the target value
      • Confirming the target modal draws a horizontal red line on the height of the configured target value into the bar chart
      • All bars that do not meet the target value are painted red, e.g. I set a target that all values should be below 10. If a bar is above 10 it is painted red.
      • When I press the target button again, the goal line is being removed and also all bars are painted blue as usual
      • The feature is documented in the user guide

        Activity

        Hide
        sebastian.stamm Sebastian Stamm added a comment -
        • It's missing documentation in the user guide
        • I am confused about the AT: "I can set a target value for all reports with view set to process instance visualized as bar chart" Right now it also works for flow node visualizations and I don't see why it shouldn't, so I'd change the AT
        • Do we want to scale the y axis in a way that the target line is always visible? Currently I can set the target value to a high value but in the diagram I cannot actually see the line
        • the above/below semantic seems to be inverted. If I say, that the target Value is above a threshold, all values above the value are in red. I expected it to be the other way round.
        • If the value is exactly the target, it is considered not reached for "above", but considered reached for "below". Is this intentional?
        • There is a bug: Create a Report with Flow Node Duration: Average; Group By Flow Node; Visualize as Bar Chart. Set target value
          • Then, switch to heatmap visualization
          • Now, I can then toggle the targetvalue view mode on despite never having set any target value for the heatmap visualization
          • A similar bug exists in the other way where I set flow node target values and then switch to the bar chart visualization

        Regarding the Code:

        • Why store viewProperty in the state when it can be accessed via props?
        • We could think about using the immutability-helper to update the state in rerenderReport
        • componentWillReceiveProps is deprecated and should not be used. We should instead use componentDidUpdate or getDerivedStateFromProps
        • do we want to have a test for the isValidNumber service?
        • I think the method determinBarColor should be called determineBarColor
        • I would have the css color strings for the two colors as a constant at the top of the Chart.js file instead of inline at multiple places.
        • We could think about moving the convertToMilliseconds function to the global formatters service. There we already have a units constant.
        Show
        sebastian.stamm Sebastian Stamm added a comment - It's missing documentation in the user guide I am confused about the AT: "I can set a target value for all reports with view set to process instance visualized as bar chart" Right now it also works for flow node visualizations and I don't see why it shouldn't, so I'd change the AT Do we want to scale the y axis in a way that the target line is always visible? Currently I can set the target value to a high value but in the diagram I cannot actually see the line the above/below semantic seems to be inverted. If I say, that the target Value is above a threshold, all values above the value are in red. I expected it to be the other way round. If the value is exactly the target, it is considered not reached for "above", but considered reached for "below". Is this intentional? There is a bug: Create a Report with Flow Node Duration: Average; Group By Flow Node; Visualize as Bar Chart. Set target value Then, switch to heatmap visualization Now, I can then toggle the targetvalue view mode on despite never having set any target value for the heatmap visualization A similar bug exists in the other way where I set flow node target values and then switch to the bar chart visualization Regarding the Code: Why store viewProperty in the state when it can be accessed via props? We could think about using the immutability-helper to update the state in rerenderReport componentWillReceiveProps is deprecated and should not be used. We should instead use componentDidUpdate or getDerivedStateFromProps do we want to have a test for the isValidNumber service? I think the method determinBarColor should be called determineBarColor I would have the css color strings for the two colors as a constant at the top of the Chart.js file instead of inline at multiple places. We could think about moving the convertToMilliseconds function to the global formatters service. There we already have a units constant.
        Hide
        sebastian.stamm Sebastian Stamm added a comment -
        • in the BarChartModal, there are several places with something like this.setState({...this.state, ...}). In such cases, the ...this.state can be left out as react only updates changed properties anyway.
        • the isAbove variable is very confusing now as it is set to true when I click on the Below button and to false when I click on the Above button
        • I think instead of const minimumStepSize = targetLineMinStep > DataMinStep ? targetLineMinStep : DataMinStep; we should write const minimumStepSize = Math.max(targetLineMinStep, DataMinStep);
        • the DataMinStep constant should not be capitalized to not confuse it with a react component
        Show
        sebastian.stamm Sebastian Stamm added a comment - in the BarChartModal, there are several places with something like this.setState({...this.state, ...}) . In such cases, the ...this.state can be left out as react only updates changed properties anyway. the isAbove variable is very confusing now as it is set to true when I click on the Below button and to false when I click on the Above button I think instead of const minimumStepSize = targetLineMinStep > DataMinStep ? targetLineMinStep : DataMinStep; we should write const minimumStepSize = Math.max(targetLineMinStep, DataMinStep); the DataMinStep constant should not be capitalized to not confuse it with a react component
        Hide
        omran.abazeed Omran Abazeed added a comment -

        Many thanks, Please have a look

        Show
        omran.abazeed Omran Abazeed added a comment - Many thanks, Please have a look
        Hide
        sebastian.stamm Sebastian Stamm added a comment -

        Well done!

        Show
        sebastian.stamm Sebastian Stamm added a comment - Well done!

          People

          • Assignee:
            Unassigned
            Reporter:
            johannes.heinemann Johannes Heinemann
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: