transforms filter breaks with one observation
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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