handle add text high/low for candlestick traces when updating

This commit is contained in:
teh_coderer
2023-05-03 12:08:56 -04:00
parent ad74f62baf
commit d1c4ce99fc
4 changed files with 196 additions and 145 deletions

View File

@@ -63,6 +63,7 @@ export default function Chart({
const [changeColor, setChangeColor] = useState(false);
const [colorActive, setColorActive] = useState(false);
const [onAnnotationClick, setOnAnnotationClick] = useState({});
const [ohlcAnnotation, setOhlcAnnotation] = useState([]);
const onClose = () => setModal({ name: "" });
@@ -90,6 +91,8 @@ export default function Chart({
setOnAnnotationClick,
setAnnotations,
onAnnotationClick,
ohlcAnnotation,
setOhlcAnnotation,
annotations,
plotDiv,
});

View File

@@ -49,21 +49,13 @@ export default function TextChartDialog({
function onChange(e: any) {
console.log(e.target.id.replace("addtext_", ""), e.target.value);
const name = e.target.id.replace("addtext_", "");
const value =
e.target.type === "checkbox"
? e.target.checked
? 1
: 0
: e.target.value;
const value = e.target.value;
setNewPopupData({ ...newPopupData, [name]: value });
}
function onSubmit() {
console.log("submitting", newPopupData);
if (newPopupData.text !== "") {
let above = ["above", 1].includes(newPopupData.yanchor);
newPopupData.yanchor = above ? "above" : "below";
if (popUpData?.annotation) {
setNewPopupData({ ...newPopupData, annotation: popUpData.annotation });
}
@@ -158,19 +150,21 @@ export default function TextChartDialog({
defaultValue={popUpData?.annotation?.size || newPopupData?.size}
></input>
<div>
<label htmlFor="addtext_yanchor" style={{ marginRight: 28 }}>
<b>Position (Above)</b>
<label htmlFor="addtext_yanchor" style={{ marginRight: 31 }}>
<b>Position</b>
</label>
<input
type="checkbox"
style={{ ...style, width: "45px" }}
<select
id="addtext_yanchor"
name="check"
defaultChecked={
newPopupData?.yanchor === "above" ? true : false
name="yanchor"
style={{ width: "100px" }}
defaultValue={
popUpData?.annotation?.yanchor || newPopupData?.yanchor
}
onChange={onChange}
></input>
>
<option value="above">Above</option>
<option value="below">Below</option>
</select>
</div>
</div>
</div>