@bigbluebutton/tldraw 2.0.0-alpha.32 → 2.0.0-alpha.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist-cjs/lib/shapes/poll/PollShapeUtil.js +1 -1
  2. package/dist-cjs/lib/shapes/poll/PollShapeUtil.js.map +2 -2
  3. package/dist-cjs/lib/shapes/poll/components/poll-content.js +13 -2
  4. package/dist-cjs/lib/shapes/poll/components/poll-content.js.map +2 -2
  5. package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs +1 -1
  6. package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs.map +2 -2
  7. package/dist-esm/lib/shapes/poll/components/poll-content.mjs +13 -2
  8. package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map +2 -2
  9. package/package.json +2 -2
  10. package/src/lib/shapes/poll/PollShapeUtil.tsx +1 -1
  11. package/src/lib/shapes/poll/components/poll-content.tsx +11 -1
package/dist-cjs/lib/shapes/poll/PollShapeUtil.js CHANGED
@@ -106,7 +106,7 @@ class PollShapeUtil extends import_editor.ShapeUtil {
106
106
  overflow: "hidden",
107
107
  position: "relative"
108
108
  },
109
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_poll_content.default, { metadata: pollMetadata, height: adjustedHeight })
109
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_poll_content.default, { metadata: pollMetadata, height: adjustedHeight, width })
110
110
  }
111
111
  )
112
112
  }
package/dist-cjs/lib/shapes/poll/PollShapeUtil.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/shapes/poll/PollShapeUtil.tsx"],
4
- "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGK;AAhGL,oBAOO;AAEP,0BAA4B;AAC5B,mCAAoC;AACpC,8BAA+B;AAGxB,MAAM,sBAAsB,wBAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,0BAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,YAAQ,oCAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,sDAAC,oBAAAA,SAAA,EAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,4CAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,eAAO,yBAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
4
+ "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} width={width} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgGK;AAhGL,oBAOO;AAEP,0BAA4B;AAC5B,mCAAoC;AACpC,8BAA+B;AAGxB,MAAM,sBAAsB,wBAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,0BAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,YAAQ,oCAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,sDAAC,oBAAAA,SAAA,EAAgB,UAAU,cAAc,QAAQ,gBAAgB,OAAc;AAAA;AAAA,QAChF;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,4CAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,eAAO,yBAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
6
6
  "names": ["ChatPollContent"]
7
7
  }
package/dist-cjs/lib/shapes/poll/components/poll-content.js CHANGED
@@ -83,11 +83,14 @@ function assertAsMetadata(metadata) {
83
83
  }
84
84
  const ChatPollContent = ({
85
85
  metadata: string,
86
- height = void 0
86
+ height = void 0,
87
+ width = void 0
87
88
  }) => {
88
89
  const pollData = JSON.parse(string);
89
90
  assertAsMetadata(pollData);
90
91
  const msg = (0, import_useTranslation.useTranslation)();
92
+ const isTypedPoll = pollData.questionType.startsWith("R-");
93
+ const yAxisWidth = isTypedPoll && width ? Math.floor(width / 2) : 80;
91
94
  const answers = pollData.answers.reduce(caseInsensitiveReducer, []);
92
95
  const translatedAnswers = answers.map((answer) => {
93
96
  const key = answer.key;
@@ -103,7 +106,15 @@ const ChatPollContent = ({
103
106
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.default.PollText, { children: pollData.questionText }),
104
107
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data: translatedAnswers, layout: "vertical", children: [
105
108
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.XAxis, { type: "number", allowDecimals: false }),
106
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.YAxis, { width: 80, type: "category", dataKey: "pollAnswer", tick: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomizedAxisTick.default, {}) }),
109
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
110
+ import_recharts.YAxis,
111
+ {
112
+ width: yAxisWidth,
113
+ type: "category",
114
+ dataKey: "pollAnswer",
115
+ tick: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomizedAxisTick.default, {})
116
+ }
117
+ ),
107
118
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "numVotes", fill: "#0C57A7" })
108
119
  ] }) })
109
120
  ] });
package/dist-cjs/lib/shapes/poll/components/poll-content.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
4
- "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsGG;AApGH,sBAAiE;AAEjE,4BAA+B;AAC/B,gCAA+B;AAC/B,oBAAmB;AAEnB,MAAM,wBAAwB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,YAAY;AACb;AAEA,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAwBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,MAAM,OAAO;AACnB,UAAM,iBAAiB,IAAK,sBAAsB,GAAG,KAAK,GAA0B;AACpF,UAAM,aAAa,GAAG,OAAO,kBAAkB,YAAO,EAAE,GACvD,iBAAiB,iBAAiB,OAAO,GAC1C;AACA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,4CAAC,yBAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,4CAAC,0BAAAC,SAAA,EAAmB,GAAI;AAAA,MACrF,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n\twidth?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n\twidth = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst isTypedPoll = pollData.questionType.startsWith('R-')\n\tconst yAxisWidth = isTypedPoll && width ? Math.floor(width / 2) : 80\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis\n\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\ttype=\"category\"\n\t\t\t\t\t\tdataKey=\"pollAnswer\"\n\t\t\t\t\t\ttick={<CustomizedAxisTick />}\n\t\t\t\t\t/>\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2GG;AAzGH,sBAAiE;AAEjE,4BAA+B;AAC/B,gCAA+B;AAC/B,oBAAmB;AAEnB,MAAM,wBAAwB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,YAAY;AACb;AAEA,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAyBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AACT,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,cAAc,SAAS,aAAa,WAAW,IAAI;AACzD,QAAM,aAAa,eAAe,QAAQ,KAAK,MAAM,QAAQ,CAAC,IAAI;AAElE,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,MAAM,OAAO;AACnB,UAAM,iBAAiB,IAAK,sBAAsB,GAAG,KAAK,GAA0B;AACpF,UAAM,aAAa,GAAG,OAAO,kBAAkB,YAAO,EAAE,GACvD,iBAAiB,iBAAiB,OAAO,GAC1C;AACA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,6CAAC,cAAAA,QAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,gDAAC,cAAAA,QAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,4CAAC,uCAAoB,OAAM,OAAM,QAAQ,WACxC,uDAAC,4BAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,kDAAC,yBAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C;AAAA,QAAC;AAAA;AAAA,UACA,OAAO;AAAA,UACP,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAM,4CAAC,0BAAAC,SAAA,EAAmB;AAAA;AAAA,MAC3B;AAAA,MACA,4CAAC,uBAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
6
6
  "names": ["Styled", "CustomizedAxisTick"]
7
7
  }
package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs CHANGED
@@ -78,7 +78,7 @@ class PollShapeUtil extends ShapeUtil {
78
78
  overflow: "hidden",
79
79
  position: "relative"
80
80
  },
81
- children: /* @__PURE__ */ jsx(ChatPollContent, { metadata: pollMetadata, height: adjustedHeight })
81
+ children: /* @__PURE__ */ jsx(ChatPollContent, { metadata: pollMetadata, height: adjustedHeight, width })
82
82
  }
83
83
  )
84
84
  }
package/dist-esm/lib/shapes/poll/PollShapeUtil.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/shapes/poll/PollShapeUtil.tsx"],
4
- "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
- "mappings": "AAgGK;AAhGL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,qBAAqB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAGxB,MAAM,sBAAsB,UAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,YAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,QAAQ,qBAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,8BAAC,mBAAgB,UAAU,cAAc,QAAQ,gBAAgB;AAAA;AAAA,QAClE;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,oBAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,WAAO,UAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
4
+ "sourcesContent": ["import {\n\tHTMLContainer,\n\tRectangle2d,\n\tShapeUtil,\n\tTLOnResizeHandler,\n\tgetDefaultColorTheme,\n\tresizeBox,\n} from '@bigbluebutton/editor'\n\nimport ChatPollContent from './components/poll-content'\nimport { pollShapeMigrations } from './poll-shape-migrations'\nimport { pollShapeProps } from './poll-shape-props'\nimport { IPollShape } from './poll-shape-types'\n\nexport class PollShapeUtil extends ShapeUtil<IPollShape> {\n\tstatic override type = 'poll' as const\n\n\tstatic override props = pollShapeProps\n\n\tstatic override migrations = pollShapeMigrations\n\n\toverride isAspectRatioLocked = (_shape: IPollShape) => false\n\n\toverride canResize = (_shape: IPollShape) => true\n\n\toverride canBind = (_shape: IPollShape) => true\n\n\tgetDefaultProps(): IPollShape['props'] {\n\t\treturn {\n\t\t\tw: 300,\n\t\t\th: 300,\n\t\t\tcolor: 'black',\n\t\t\tfill: 'white',\n\t\t\tquestion: '',\n\t\t\tnumRespondents: 0,\n\t\t\tnumResponders: 0,\n\t\t\tquestionText: '',\n\t\t\tquestionType: '',\n\t\t\tanswers: [],\n\t\t}\n\t}\n\n\tgetGeometry(shape: IPollShape) {\n\t\treturn new Rectangle2d({\n\t\t\twidth: shape.props.w,\n\t\t\theight: shape.props.h,\n\t\t\tisFilled: true,\n\t\t})\n\t}\n\n\tcomponent(shape: IPollShape) {\n\t\t// Use the shape's specified width and height, falling back to defaults if missing or invalid.\n\t\tconst width = shape.props.w > 0 ? shape.props.w : 300\n\t\tconst height = shape.props.h > 0 ? shape.props.h : 300\n\n\t\tconst theme = getDefaultColorTheme({\n\t\t\tisDarkMode: this.editor.user.getIsDarkMode(),\n\t\t})\n\n\t\t// const contentRef = React.useRef<HTMLDivElement>(null)\n\t\tconst pollMetadata = JSON.stringify({\n\t\t\tid: shape.id,\n\t\t\tquestion: shape.props.question,\n\t\t\tnumRespondents: shape.props.numRespondents,\n\t\t\tnumResponders: shape.props.numResponders,\n\t\t\tquestionText: shape.props.questionText,\n\t\t\tquestionType: shape.props.questionType,\n\t\t\tanswers: shape.props.answers,\n\t\t})\n\n\t\tconst adjustedHeight = shape.props.questionText.length > 0 ? height - 75 : height\n\n\t\treturn (\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: '1px solid #8B9AA8',\n\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\tboxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tpointerEvents: 'all',\n\t\t\t\t\tbackgroundColor: theme[shape.props.color].semi,\n\t\t\t\t\tcolor: theme[shape.props.color].solid,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: `${width}px`,\n\t\t\t\t\t\theight: `${height}px`,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChatPollContent metadata={pollMetadata} height={adjustedHeight} width={width} />\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t)\n\t}\n\n\tindicator(shape: IPollShape) {\n\t\treturn <rect width={shape.props.w} height={shape.props.h} />\n\t}\n\n\toverride onResize: TLOnResizeHandler<IPollShape> = (shape, info) => {\n\t\treturn resizeBox(shape, info)\n\t}\n}\n\nexport default PollShapeUtil\n"],
5
+ "mappings": "AAgGK;AAhGL;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AAEP,OAAO,qBAAqB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAGxB,MAAM,sBAAsB,UAAsB;AAAA,EACxD,OAAgB,OAAO;AAAA,EAEvB,OAAgB,QAAQ;AAAA,EAExB,OAAgB,aAAa;AAAA,EAEpB,sBAAsB,CAAC,WAAuB;AAAA,EAE9C,YAAY,CAAC,WAAuB;AAAA,EAEpC,UAAU,CAAC,WAAuB;AAAA,EAE3C,kBAAuC;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,MAAM;AAAA,MACN,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,SAAS,CAAC;AAAA,IACX;AAAA,EACD;AAAA,EAEA,YAAY,OAAmB;AAC9B,WAAO,IAAI,YAAY;AAAA,MACtB,OAAO,MAAM,MAAM;AAAA,MACnB,QAAQ,MAAM,MAAM;AAAA,MACpB,UAAU;AAAA,IACX,CAAC;AAAA,EACF;AAAA,EAEA,UAAU,OAAmB;AAE5B,UAAM,QAAQ,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAClD,UAAM,SAAS,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAEnD,UAAM,QAAQ,qBAAqB;AAAA,MAClC,YAAY,KAAK,OAAO,KAAK,cAAc;AAAA,IAC5C,CAAC;AAGD,UAAM,eAAe,KAAK,UAAU;AAAA,MACnC,IAAI,MAAM;AAAA,MACV,UAAU,MAAM,MAAM;AAAA,MACtB,gBAAgB,MAAM,MAAM;AAAA,MAC5B,eAAe,MAAM,MAAM;AAAA,MAC3B,cAAc,MAAM,MAAM;AAAA,MAC1B,cAAc,MAAM,MAAM;AAAA,MAC1B,SAAS,MAAM,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,iBAAiB,MAAM,MAAM,aAAa,SAAS,IAAI,SAAS,KAAK;AAE3E,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAI,MAAM;AAAA,QACV,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,eAAe;AAAA,UACf,iBAAiB,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,UAC1C,OAAO,MAAM,MAAM,MAAM,KAAK,EAAE;AAAA,QACjC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAO;AAAA,cACN,OAAO,GAAG,KAAK;AAAA,cACf,QAAQ,GAAG,MAAM;AAAA,cACjB,UAAU;AAAA,cACV,UAAU;AAAA,YACX;AAAA,YAEA,8BAAC,mBAAgB,UAAU,cAAc,QAAQ,gBAAgB,OAAc;AAAA;AAAA,QAChF;AAAA;AAAA,IACD;AAAA,EAEF;AAAA,EAEA,UAAU,OAAmB;AAC5B,WAAO,oBAAC,UAAK,OAAO,MAAM,MAAM,GAAG,QAAQ,MAAM,MAAM,GAAG;AAAA,EAC3D;AAAA,EAES,WAA0C,CAAC,OAAO,SAAS;AACnE,WAAO,UAAU,OAAO,IAAI;AAAA,EAC7B;AACD;AAEA,IAAO,wBAAQ;",
6
6
  "names": []
7
7
  }
package/dist-esm/lib/shapes/poll/components/poll-content.mjs CHANGED
@@ -50,11 +50,14 @@ function assertAsMetadata(metadata) {
50
50
  }
51
51
  const ChatPollContent = ({
52
52
  metadata: string,
53
- height = void 0
53
+ height = void 0,
54
+ width = void 0
54
55
  }) => {
55
56
  const pollData = JSON.parse(string);
56
57
  assertAsMetadata(pollData);
57
58
  const msg = useTranslation();
59
+ const isTypedPoll = pollData.questionType.startsWith("R-");
60
+ const yAxisWidth = isTypedPoll && width ? Math.floor(width / 2) : 80;
58
61
  const answers = pollData.answers.reduce(caseInsensitiveReducer, []);
59
62
  const translatedAnswers = answers.map((answer) => {
60
63
  const key = answer.key;
@@ -70,7 +73,15 @@ const ChatPollContent = ({
70
73
  /* @__PURE__ */ jsx(Styled.PollText, { children: pollData.questionText }),
71
74
  /* @__PURE__ */ jsx(ResponsiveContainer, { width: "90%", height: useHeight, children: /* @__PURE__ */ jsxs(BarChart, { data: translatedAnswers, layout: "vertical", children: [
72
75
  /* @__PURE__ */ jsx(XAxis, { type: "number", allowDecimals: false }),
73
- /* @__PURE__ */ jsx(YAxis, { width: 80, type: "category", dataKey: "pollAnswer", tick: /* @__PURE__ */ jsx(CustomizedAxisTick, {}) }),
76
+ /* @__PURE__ */ jsx(
77
+ YAxis,
78
+ {
79
+ width: yAxisWidth,
80
+ type: "category",
81
+ dataKey: "pollAnswer",
82
+ tick: /* @__PURE__ */ jsx(CustomizedAxisTick, {})
83
+ }
84
+ ),
74
85
  /* @__PURE__ */ jsx(Bar, { dataKey: "numVotes", fill: "#0C57A7" })
75
86
  ] }) })
76
87
  ] });
package/dist-esm/lib/shapes/poll/components/poll-content.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/lib/shapes/poll/components/poll-content.tsx"],
4
- "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis width={80} type=\"category\" dataKey=\"pollAnswer\" tick={<CustomizedAxisTick />} />\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
- "mappings": "AAsGG,cAEC,YAFD;AApGH,SAAS,KAAK,UAAU,qBAAqB,OAAO,aAAa;AAEjE,SAAS,sBAAsB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,YAAY;AAEnB,MAAM,wBAAwB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,YAAY;AACb;AAEA,MAAM,yBAAyB,CAAC,KAAY,SAA4C;AACvF,QAAM,QAAQ,IAAI,UAAU,CAAC,QAAQ,IAAI,IAAI,YAAY,MAAM,KAAK,IAAI,YAAY,CAAC;AACrF,MAAI,UAAU,IAAI;AACjB,QAAI,IAAI,KAAK,EAAE,YAAY,KAAK;AAAU,UAAI,KAAK,EAAE,YAAY,KAAK;AAAA,SACjE;AACJ,YAAM,YAAY,IAAI,KAAK,EAAE;AAC7B,UAAI,KAAK,IAAI;AACb,UAAI,KAAK,EAAE,YAAY;AAAA,IACxB;AAAA,EACD,OAAO;AACN,QAAI,KAAK,IAAI;AAAA,EACd;AACA,SAAO;AACR;AAwBA,SAAS,iBAAiB,UAAiD;AAC1E,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACtD,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC5C;AACA,MAAI,OAAQ,SAAsB,OAAO,UAAU;AAClD,UAAM,IAAI,MAAM,6BAA6B;AAAA,EAC9C;AACA,MAAI,OAAQ,SAAsB,mBAAmB,UAAU;AAC9D,UAAM,IAAI,MAAM,yCAAyC;AAAA,EAC1D;AACA,MAAI,OAAQ,SAAsB,kBAAkB,UAAU;AAC7D,UAAM,IAAI,MAAM,wCAAwC;AAAA,EACzD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,OAAQ,SAAsB,iBAAiB,UAAU;AAC5D,UAAM,IAAI,MAAM,uCAAuC;AAAA,EACxD;AACA,MAAI,CAAC,MAAM,QAAS,SAAsB,OAAO,GAAG;AACnD,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACnD;AACD;AAEA,MAAM,kBAAkD,CAAC;AAAA,EACxD,UAAU;AAAA,EACV,SAAS;AACV,MAAM;AACL,QAAM,WAAW,KAAK,MAAM,MAAM;AAClC,mBAAiB,QAAQ;AACzB,QAAM,MAAM,eAAe;AAE3B,QAAM,UAAU,SAAS,QAAQ,OAAO,wBAAwB,CAAC,CAAC;AAElE,QAAM,oBAAoB,QAAQ,IAAI,CAAC,WAAoB;AAC1D,UAAM,MAAM,OAAO;AACnB,UAAM,iBAAiB,IAAK,sBAAsB,GAAG,KAAK,GAA0B;AACpF,UAAM,aAAa,GAAG,OAAO,kBAAkB,YAAO,EAAE,GACvD,iBAAiB,iBAAiB,OAAO,GAC1C;AACA,WAAO;AAAA,MACN,GAAG;AAAA,MACH;AAAA,IACD;AAAA,EACD,CAAC;AAED,QAAM,YAAY,UAAU,kBAAkB,SAAS;AACvD,SACC,qBAAC,OAAO,aAAP,EAAmB,aAAU,uBAC7B;AAAA,wBAAC,OAAO,UAAP,EAAiB,mBAAS,cAAa;AAAA,IACxC,oBAAC,uBAAoB,OAAM,OAAM,QAAQ,WACxC,+BAAC,YAAS,MAAM,mBAAmB,QAAO,YACzC;AAAA,0BAAC,SAAM,MAAK,UAAS,eAAe,OAAO;AAAA,MAC3C,oBAAC,SAAM,OAAO,IAAI,MAAK,YAAW,SAAQ,cAAa,MAAM,oBAAC,sBAAmB,GAAI;AAAA,MACrF,oBAAC,OAAI,SAAQ,YAAW,MAAK,WAAU;AAAA,OACxC,GACD;AAAA,KACD;AAEF;AAEA,IAAO,uBAAQ;",
4
+ "sourcesContent": ["/* eslint-disable import/no-extraneous-dependencies */\nimport React from 'react'\nimport { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'\nimport { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../ui/hooks/useTranslation/useTranslation'\nimport CustomizedAxisTick from './CustomizedAxisTick'\nimport Styled from './styles'\n\nconst translatedAnswersKeys = {\n\tTrue: 'app.poll.t',\n\tFalse: 'app.poll.f',\n\tYes: 'app.poll.y',\n\tNo: 'app.poll.n',\n\tAbstention: 'app.poll.abstention',\n}\n\nconst caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => {\n\tconst index = acc.findIndex((ans) => ans.key.toLowerCase() === item.key.toLowerCase())\n\tif (index !== -1) {\n\t\tif (acc[index].numVotes >= item.numVotes) acc[index].numVotes += item.numVotes\n\t\telse {\n\t\t\tconst tempVotes = acc[index].numVotes\n\t\t\tacc[index] = item\n\t\t\tacc[index].numVotes += tempVotes\n\t\t}\n\t} else {\n\t\tacc.push(item)\n\t}\n\treturn acc\n}\n\ninterface ChatPollContentProps {\n\tmetadata: string\n\theight?: number\n\twidth?: number\n}\n\ninterface Metadata {\n\tid: string\n\tquestion: string\n\tnumRespondents: number\n\tnumResponders: number\n\tquestionText: string\n\tquestionType: string\n\tanswers: Array<Answers>\n}\n\ninterface Answers {\n\tkey: string\n\tnumVotes: number\n\tid: number\n\tisCorrectAnswer?: boolean\n}\n\nfunction assertAsMetadata(metadata: unknown): asserts metadata is Metadata {\n\tif (typeof metadata !== 'object' || metadata === null) {\n\t\tthrow new Error('metadata is not an object')\n\t}\n\tif (typeof (metadata as Metadata).id !== 'string') {\n\t\tthrow new Error('metadata.id is not a string')\n\t}\n\tif (typeof (metadata as Metadata).numRespondents !== 'number') {\n\t\tthrow new Error('metadata.numRespondents is not a number')\n\t}\n\tif (typeof (metadata as Metadata).numResponders !== 'number') {\n\t\tthrow new Error('metadata.numResponders is not a number')\n\t}\n\tif (typeof (metadata as Metadata).questionText !== 'string') {\n\t\tthrow new Error('metadata.questionText is not a string')\n\t}\n\tif (typeof (metadata as Metadata).questionType !== 'string') {\n\t\tthrow new Error('metadata.questionType is not a string')\n\t}\n\tif (!Array.isArray((metadata as Metadata).answers)) {\n\t\tthrow new Error('metadata.answers is not an array')\n\t}\n}\n\nconst ChatPollContent: React.FC<ChatPollContentProps> = ({\n\tmetadata: string,\n\theight = undefined,\n\twidth = undefined,\n}) => {\n\tconst pollData = JSON.parse(string) as unknown\n\tassertAsMetadata(pollData)\n\tconst msg = useTranslation()\n\n\tconst isTypedPoll = pollData.questionType.startsWith('R-')\n\tconst yAxisWidth = isTypedPoll && width ? Math.floor(width / 2) : 80\n\n\tconst answers = pollData.answers.reduce(caseInsensitiveReducer, [])\n\n\tconst translatedAnswers = answers.map((answer: Answers) => {\n\t\tconst key = answer.key as keyof typeof translatedAnswersKeys\n\t\tconst translationKey = msg((translatedAnswersKeys[key] || key) as TLUiTranslationKey)\n\t\tconst pollAnswer = `${answer.isCorrectAnswer ? '\u2705 ' : ''}${\n\t\t\ttranslationKey ? translationKey : answer.key\n\t\t}`\n\t\treturn {\n\t\t\t...answer,\n\t\t\tpollAnswer,\n\t\t}\n\t})\n\n\tconst useHeight = height || translatedAnswers.length * 50\n\treturn (\n\t\t<Styled.PollWrapper data-test=\"chatPollMessageText\">\n\t\t\t<Styled.PollText>{pollData.questionText}</Styled.PollText>\n\t\t\t<ResponsiveContainer width=\"90%\" height={useHeight}>\n\t\t\t\t<BarChart data={translatedAnswers} layout=\"vertical\">\n\t\t\t\t\t<XAxis type=\"number\" allowDecimals={false} />\n\t\t\t\t\t<YAxis\n\t\t\t\t\t\twidth={yAxisWidth}\n\t\t\t\t\t\ttype=\"category\"\n\t\t\t\t\t\tdataKey=\"pollAnswer\"\n\t\t\t\t\t\ttick={<CustomizedAxisTick />}\n\t\t\t\t\t/>\n\t\t\t\t\t<Bar dataKey=\"numVotes\" fill=\"#0C57A7\" />\n\t\t\t\t</BarChart>\n\t\t\t</ResponsiveContainer>\n\t\t</Styled.PollWrapper>\n\t)\n}\n\nexport default ChatPollContent\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bigbluebutton/tldraw",
3
3
  "description": "BigBlueButton's fork of tldraw 2.0-alpha.19 - A tiny little drawing editor.",
4
- "version": "2.0.0-alpha.32",
4
+ "version": "2.0.0-alpha.34",
5
5
  "packageManager": "yarn@3.5.0",
6
6
  "author": {
7
7
  "name": "tldraw GB Ltd.",
@@ -35,7 +35,7 @@
35
35
  "src"
36
36
  ],
37
37
  "dependencies": {
38
- "@bigbluebutton/editor": "2.0.0-alpha.32",
38
+ "@bigbluebutton/editor": "2.0.0-alpha.34",
39
39
  "@radix-ui/react-alert-dialog": "^1.0.0",
40
40
  "@radix-ui/react-context-menu": "^2.1.5",
41
41
  "@radix-ui/react-dialog": "^1.0.5",
package/src/lib/shapes/poll/PollShapeUtil.tsx CHANGED
@@ -94,7 +94,7 @@ export class PollShapeUtil extends ShapeUtil<IPollShape> {
94
94
  position: 'relative',
95
95
  }}
96
96
  >
97
- <ChatPollContent metadata={pollMetadata} height={adjustedHeight} />
97
+ <ChatPollContent metadata={pollMetadata} height={adjustedHeight} width={width} />
98
98
  </div>
99
99
  </HTMLContainer>
100
100
  )
package/src/lib/shapes/poll/components/poll-content.tsx CHANGED
@@ -32,6 +32,7 @@ const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: numbe
32
32
  interface ChatPollContentProps {
33
33
  metadata: string
34
34
  height?: number
35
+ width?: number
35
36
  }
36
37
 
37
38
  interface Metadata {
@@ -78,11 +79,15 @@ function assertAsMetadata(metadata: unknown): asserts metadata is Metadata {
78
79
  const ChatPollContent: React.FC<ChatPollContentProps> = ({
79
80
  metadata: string,
80
81
  height = undefined,
82
+ width = undefined,
81
83
  }) => {
82
84
  const pollData = JSON.parse(string) as unknown
83
85
  assertAsMetadata(pollData)
84
86
  const msg = useTranslation()
85
87
 
88
+ const isTypedPoll = pollData.questionType.startsWith('R-')
89
+ const yAxisWidth = isTypedPoll && width ? Math.floor(width / 2) : 80
90
+
86
91
  const answers = pollData.answers.reduce(caseInsensitiveReducer, [])
87
92
 
88
93
  const translatedAnswers = answers.map((answer: Answers) => {
@@ -104,7 +109,12 @@ const ChatPollContent: React.FC<ChatPollContentProps> = ({
104
109
  <ResponsiveContainer width="90%" height={useHeight}>
105
110
  <BarChart data={translatedAnswers} layout="vertical">
106
111
  <XAxis type="number" allowDecimals={false} />
107
- <YAxis width={80} type="category" dataKey="pollAnswer" tick={<CustomizedAxisTick />} />
112
+ <YAxis
113
+ width={yAxisWidth}
114
+ type="category"
115
+ dataKey="pollAnswer"
116
+ tick={<CustomizedAxisTick />}
117
+ />
108
118
  <Bar dataKey="numVotes" fill="#0C57A7" />
109
119
  </BarChart>
110
120
  </ResponsiveContainer>