diff --git a/packages/tldraw/src/lib/shapes/poll/components/CustomizedAxisTick.tsx b/packages/tldraw/src/lib/shapes/poll/components/CustomizedAxisTick.tsx new file mode 100644 index 000000000000..81eb59fa01fd --- /dev/null +++ b/packages/tldraw/src/lib/shapes/poll/components/CustomizedAxisTick.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +function getAverageCharacterWidth(text: string, font: string) { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + if (!ctx) return null; + + ctx.font = font; + + const textWidth = ctx.measureText(text).width; + const averageAdvance = textWidth / text.length; + + return averageAdvance; +} + +const TICK_SIZE = 6; +const AVERAGE_CHAR_WIDTH = getAverageCharacterWidth('0', 'Source Sans Pro') ?? 6; +const ELLIPSIS = '...'; + +const CustomizedAxisTick = (props: any) => { + const { payload, ...restProps } = props; + const { width } = restProps; + const numberOfChars = Math.floor((width - TICK_SIZE) / AVERAGE_CHAR_WIDTH); + const restValue = payload.value.substring(numberOfChars, payload.value.length); + + return ( + + + {payload.value.substring(0, restValue.length > 0 ? numberOfChars - ELLIPSIS.length : numberOfChars)} + {restValue.length > 0 && ELLIPSIS} + + + ); +}; + +export default CustomizedAxisTick; \ No newline at end of file diff --git a/packages/tldraw/src/lib/shapes/poll/components/poll-content.tsx b/packages/tldraw/src/lib/shapes/poll/components/poll-content.tsx index b58a1bcf9d53..8f86ba409327 100644 --- a/packages/tldraw/src/lib/shapes/poll/components/poll-content.tsx +++ b/packages/tldraw/src/lib/shapes/poll/components/poll-content.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from 'recharts' import { TLUiTranslationKey } from '../../../ui/hooks/useTranslation/TLUiTranslationKey' +import CustomizedAxisTick from './CustomizedAxisTick'; import Styled from './styles' const caseInsensitiveReducer = (acc: any[], item: { key: string; numVotes: number }) => { @@ -89,7 +90,7 @@ const ChatPollContent: React.FC = ({ - + } />