Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rect annotation rendered outside chart on histogram #341

Closed
markov00 opened this issue Aug 22, 2019 · 1 comment · Fixed by #343
Closed

Rect annotation rendered outside chart on histogram #341

markov00 opened this issue Aug 22, 2019 · 1 comment · Fixed by #343
Assignees
Labels
:annotation Annotation (line, rect, text) related issue bug Something isn't working released Issue released publicly

Comments

@markov00
Copy link
Member

markov00 commented Aug 22, 2019

Describe the bug
On Histogram mode, with a single histogram value, a rect annotation with the the coordinates that expand from a value within the domain to the max value of the domain is drawn outside of the chart area

To Reproduce
Steps to reproduce the behavior:
Use the following on the playground:

 <Chart size={{ height: 200 }}>
  <Settings
    tooltip={{ type: 'vertical' }}
    debug={false}
    legendPosition={Position.Right}
    showLegend={true}
    xDomain={{
      min: 1566079200000,
      max: 1566079200000,
      minInterval: 86400000,
    }}
  />
  <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
  <Axis
    id={getAxisId('timestamp')}
    title="timestamp"
    position={Position.Bottom}
    tickFormat={timeFormatter(niceTimeFormatByDay(1))}
  />
  <RectAnnotation
    annotationId={getAnnotationId('annotation1')}
    dataValues={[
      {
        coordinates: {
          x0: 1566103254092,
        },
        details: `06:40`,
      },
    ]}
    style={{
      stroke: 'rgba(0, 0, 0, 0)',
      strokeWidth: 1,
      opacity: 0.5,
      fill: 'rgba(200, 0, 0, 0.5)',
    }}
    zIndex={-2}
  />
  <RectAnnotation
    annotationId={getAnnotationId('annotation2')}
    dataValues={[
      {
        coordinates: {
          x1: 1566088404270,
        },
        details: `02:33`,
      },
    ]}
    style={{
      stroke: 'rgba(0, 0, 0, 0)',
      strokeWidth: 1,
      opacity: 0.5,
      fill: 'rgba(0, 0, 200, 0.5)',
    }}
    zIndex={-2}
  />
  <HistogramBarSeries
    id={getSpecId('dataset B')}
    xScaleType={ScaleType.Time}
    yScaleType={ScaleType.Linear}
    data={[[1566079200000, 10]]}
    xAccessor={0}
    yAccessors={[1]}
    timeZone={'local'}
    barSeriesStyle={{
      rect: {
        opacity: 0.7,
      },
    }}
  />
</Chart>

Expected behavior
The annotation should be always be rendered inside the chart.

Screenshots
Screenshot 2019-08-23 at 01 27 35

Version:

  • OS: all
  • Browser: all
  • Elastic Charts: 10.0.1

Additional context
n/a

Errors in browser console
n/a

Kibana Cross Issues
n/a

Checklist

  • [ ] every related Kibana issue is listed under Kibana Cross Issues list
  • [ ] kibana cross issue tag is associated to the issue if any kibana cross issue is present
@markov00 markov00 added bug Something isn't working :annotation Annotation (line, rect, text) related issue labels Aug 22, 2019
@markov00 markov00 self-assigned this Aug 22, 2019
markov00 added a commit that referenced this issue Aug 26, 2019
This commit fix an issue where a rect annotation with x0 defined in a single value histogram, is
drawn outside of the chart.

BREAKING CHANGE: The current coordinate configuration of a rect annotation were inverted. This commit now reverse them: a rect coordinate with only the x0 value will cover from the x0 value to the end of the domain, a rect coordinate with only the x1 value will cover the interval from the beginning of the domain till the x1 value.

fix #342, fix #341
markov00 pushed a commit that referenced this issue Aug 26, 2019
# [11.0.0](v10.3.1...v11.0.0) (2019-08-26)

### Bug Fixes

* **histogram:** fix overflowing annotation with single value ([#343](#343)) ([2268f04](2268f04)), closes [#342](#342) [#341](#341)

### BREAKING CHANGES

* **histogram:** The current coordinate configuration of a rect annotation were inverted. This commit now reverse them: a rect coordinate with only the x0 value will cover from the x0 value to the end of the domain, a rect coordinate with only the x1 value will cover the interval from the beginning of the domain till the x1 value.
@markov00
Copy link
Member Author

🎉 This issue has been resolved in version 11.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 26, 2019
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
# [11.0.0](elastic/elastic-charts@v10.3.1...v11.0.0) (2019-08-26)

### Bug Fixes

* **histogram:** fix overflowing annotation with single value ([opensearch-project#343](elastic/elastic-charts#343)) ([7dc097e](elastic/elastic-charts@7dc097e)), closes [opensearch-project#342](elastic/elastic-charts#342) [opensearch-project#341](elastic/elastic-charts#341)

### BREAKING CHANGES

* **histogram:** The current coordinate configuration of a rect annotation were inverted. This commit now reverse them: a rect coordinate with only the x0 value will cover from the x0 value to the end of the domain, a rect coordinate with only the x1 value will cover the interval from the beginning of the domain till the x1 value.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
:annotation Annotation (line, rect, text) related issue bug Something isn't working released Issue released publicly
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant