plotly / plotly/plotly.R

transforms filter breaks with one observation

Open
#2,173 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
R
Stars
2.7k
Forks
641
PR merge metrics
No merged PRs in 30d

Description

Hi,

Theres an issue with the transform filter if there is only one observation. It just returns the chart axis. Below is a code to reproduce the issue.

library(data.table)
library(plotly)

# Transforms does not work if there is only one observation
x.data_exp <- data.table(Test = 'a', Exposure = 1)

plt <- plot_ly(height=400, transforms=list(list(type='filter', target=~Exposure, operation='>', value="-1"))) %>%
              add_bars(data = x.data_exp, x=~Test, y = ~Exposure) %>%
              layout(updatemenus = list(list(type='buttons', active=0, x=1.08, y=-0.1, xanchor='left', yanchor='bottom', direction='down', 
                                             buttons=list(
                                               list(label='all', method='restyle', args=list('transforms[0].value','-1')),
                                               list(label='1pc+', method='restyle', args=list('transforms[0].value','0.01')),
                                               list(label='3pc+', method='restyle', args=list('transforms[0].value','0.03'))
                                             ))))

I looked into the HTML and there is a part in the json data where "target":1. If you change this to "target":[1] the chart works as intended. So if there is only one observation maybe its outputting a scaler when it should be an array.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>body{background-color:white;}</style>
<script src="lib/htmlwidgets-1.5.4/htmlwidgets.js"></script>
<script src="lib/plotly-binding-4.10.0/plotly.js"></script>
<script src="lib/typedarray-0.1/typedarray.min.js"></script>
<script src="lib/jquery-1.11.3/jquery.min.js"></script>
<link href="lib/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" />
<script src="lib/crosstalk-1.0.0/js/crosstalk.min.js"></script>
<link href="lib/plotly-htmlwidgets-css-2.5.1/plotly-htmlwidgets.css" rel="stylesheet" />
<script src="lib/plotly-main-2.5.1/plotly-latest.min.js"></script>

</head>
<body>
<div id="htmlwidget_container">
  <div id="htmlwidget-076f9323fea045959323" style="width:100%;height:400px;" class="plotly html-widget"></div>
</div>
<script type="application/json" data-for="htmlwidget-076f9323fea045959323">{"x":{"visdat":{"1628140951fe":["function () ","plotlyVisDat"],"16285be3752d":["function () ","data"]},"cur_data":"16285be3752d","attrs":{"16285be3752d":{"transforms":[{"type":"filter","target":{},"operation":">","value":"-1"}],"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"x":{},"y":{},"type":"bar","inherit":true}},"layout":{"height":400,"margin":{"b":40,"l":60,"t":25,"r":10},"updatemenus":[{"type":"buttons","active":0,"x":1.08,"y":-0.1,"xanchor":"left","yanchor":"bottom","direction":"down","buttons":[{"label":"all","method":"restyle","args":["transforms[0].value","-1"]},{"label":"1pc+","method":"restyle","args":["transforms[0].value","0.01"]},{"label":"3pc+","method":"restyle","args":["transforms[0].value","0.03"]}]}],"xaxis":{"domain":[0,1],"automargin":true,"title":"Test","type":"category","categoryorder":"array","categoryarray":["a"]},"yaxis":{"domain":[0,1],"automargin":true,"title":"Exposure"},"hovermode":"closest","showlegend":false},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false},"data":[{"transforms":[{"type":"filter","target":1,"operation":">","value":"-1"}],"x":["a"],"y":[1],"type":"bar","marker":{"color":"rgba(31,119,180,1)","line":{"color":"rgba(31,119,180,1)"}},"error_y":{"color":"rgba(31,119,180,1)"},"error_x":{"color":"rgba(31,119,180,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-076f9323fea045959323">{"viewer":{"width":"100%","height":400,"padding":0,"fill":false},"browser":{"width":"100%","height":400,"padding":0,"fill":false}}</script>
</body>
</html>

Thanks,
Andrew

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied R reproduction and inspect the generated HTML/JSON for the transform target when there is one observation. Trace how the singleton target is serialized and verify that the chart renders correctly with the target represented as an array.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, r
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.