search

ruilisi / fortune-sheet

A drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets
https://ruilisi.github.io/fortune-sheet-docs/
MIT License
2.54k stars 227 forks source link

Set default currency symbol in settings #589

Closed VirtuosiMedia closed 2 months ago

VirtuosiMedia commented 2 months ago

Is there a way to set the currency symbol icon in the "Format as currency" button in the toolbar?

image

Ideally, I'd like to be able to do the following:

// Configuration item
const settings = {
     data: [{ name: 'Sheet1', celldata: [{ r: 0, c: 0, v: null }] }], // sheet data
     onChange: (data) => {}, // onChange event
     lang:'en', // set language
     currency: 'USD', // set currency. Alternatively, set the symbol directly: $, €, £, etc
     // More other settings...
}

// Render the workbook
<Workbook {...settings} />

However, if there is another way to accomplish this currently, please let me know.

sanchit3008 commented 2 months ago

summing this up, you want -

  1. control over currency symbol icon in the toolbar
  2. the icon should format the text in the cell as per the currency supplied by the user in the newly proposed currnecy prop

if yes, this seems like a useful thing to have. let me see what can be done.

sanchit3008 commented 2 months ago

replacing the yuan icon seems infeasible, but i can implement passing a currency symbol to the workbook props. will that work?

VirtuosiMedia commented 2 months ago

Thank you very much for the quick response.

summing this up, you want -

  1. control over currency symbol icon in the toolbar
  2. the icon should format the text in the cell as per the currency supplied by the user in the newly proposed currency prop

if yes, this seems like a useful thing to have. let me see what can be done.

Yes, that would be perfect, plus a third item:

  1. Control over currency symbol icon in the toolbar
  2. The icon should format the text in the cell as per the currency supplied by the user in the newly proposed currency prop
  3. The format dropdown, pictured below, also has a default $ dollar sign. That currency symbol should also be the same as the setting.

image

Ideally, a localization option for the currency symbol which could be passed to Fortune Sheet from the parent application. Perhaps something like a React Context Provider could be used to pass the setting down to the relevant component?

I'm not able to do a full PR right now, but these seem to be some of the relevant places in the code, though there may be others:

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/modules/toolbar.ts#L938

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/react/src/components/SVGDefines.tsx#L848

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/react/src/components/Toolbar/index.tsx#L262-L362

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/locale/en.ts#L11237-L11239

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/locale/es.ts#L11210-L11212

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/locale/hi.ts#L11243-L11245

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/locale/zh.ts#L11222-L11224

https://github.com/ruilisi/fortune-sheet/blob/3debb19f4d18dba5ce70db5458fe55a2a79416bd/packages/core/src/locale/zh_tw.ts#L11188-L11191

replacing the yuan icon seems infeasible, but i can implement passing a currency symbol to the workbook props. will that work?

The icon change would be important so end users could use their own currency symbol. Could something like the following work?

Wikimedia has public domain SVGs for common currency symbols:

  1. https://commons.wikimedia.org/wiki/File:Pound_Sign.svg
  2. https://commons.wikimedia.org/wiki/File:Euro_symbol_black.svg
  3. https://commons.wikimedia.org/wiki/File:Dollar_Sign.svg

These could perhaps be implemented something like (note the different ids which could be mapped to the setting):

      <symbol viewBox="0 0 1024 1024" id="currency-format-yuan">
        <path
          fill="#525C6F"
          d="M675.861333 192l45.610667 44.906667-166.997333 169.6h237.525333v64H544v144.597333h248v64H544v176.597333h-64v-176.597333H232v-64H480v-144.597333H232v-64h237.482667l-166.954667-169.6L348.138667 192 512 358.464 675.861333 192z"
          p-id="5490"
        />
      </symbol>
      <symbol viewBox="0 0 1024 1024" id="currency-format-dollar">
        <path
          fill="#525C6F"
          d="m 145,312 c -2,69 31,100 104,102 78,1 113,-34 109,-101 -6,-58 -62,-73 -106,-79 -48,-17 -99,-25 -99,-95 0,-48 32,-79 99,-78 60,0 97,25 96,84"
          style="fill:none;stroke:#000000;stroke-width:40"
          p-id="5491"
        />
        <path
          fill="#525C6F"
          d="m 250,15 0,470"
          style="stroke:#000000;stroke-width:30"
          p-id="5492"
        />
      </symbol>
     <symbol viewBox="0 0 1024 1024" id="currency-format-euro">
        <path
          fill="#525C6F"
          d="M-70.843013-15H31.177404l-4.156987 10H-75zm0 20H22.863429l-4.156987 10H-75zM38.302222-32.13938a50 50 0 1 0 0 64.278761v14.04438a60 60 0 1 1 4.231556-88.502524z"
          p-id="5493"
        />
     <symbol viewBox="0 0 1024 1024" id="currency-format-pound">
        <path
          fill="#525C6F"
          d="m 301.29681,788.55573 0,32.9956 -81.5918,0 c 5.99351,17.19988 8.99033,31.20133 8.99048,42.0044 l 0,0.60424 c -1.5e-4,21.9972 -11.59682,46.79576 -34.79004,74.39576 -9.20421,11.20611 -21.20371,24.20659 -35.99854,39.00146 23.5961,-15.60053 47.99182,-23.40082 73.18726,-23.40088 14.0013,6e-5 30.40143,3.00299 49.20044,9.00879 21.99685,6.39653 37.79883,9.59477 47.406,9.59473 16.00316,4e-5 32.60471,-5.99971 49.80469,-17.99927 l 25.19531,39.60571 c -22.80303,22.39993 -49.00539,33.59983 -78.60717,33.59983 -17.60277,0 -42.99947,-5.603 -76.19019,-16.8091 l -11.40747,-4.1931 c -13.19594,-4.4067 -26.39783,-6.6101 -39.60571,-6.6101 -21.1915,0 -42.98713,7.4036 -65.38696,22.2107 l -28.8025,-39.6057 c 40.79584,-35.20501 64.79484,-65.40518 71.99708,-90.60058 2.00185,-7.20202 3.00283,-14.80089 3.00292,-22.79664 -9e-5,1.5e-4 -9e-5,-0.20127 0,-0.60424 l 0,-0.60425 c -9e-5,-15.19759 -4.80355,-30.79816 -14.4104,-46.80176 l -65.991206,0 0,-32.9956 48.596196,0 c -18.39605,-30.39526 -28.59501,-52.19089 -30.59693,-65.38697 -0.8057,-3.60078 -1.20853,-7.60468 -1.20849,-12.01172 l 0,-6.00586 c -4e-5,-39.59926 16.00336,-71.99669 48.01025,-97.19238 26.4037,-20.80035 57.80015,-31.20073 94.18945,-31.20117 l 0.60425,0 c 45.20242,4.4e-4 80.20604,14.80145 105.01099,44.40308 l 10.19897,14.99633 c 10.79072,18.39636 16.38763,44.99545 16.79077,79.79737 l -52.7893,0 c -1.59938,-61.59632 -28.80272,-92.39463 -81.61011,-92.39502 -35.59584,3.9e-4 -60.59582,12.59803 -75,37.79297 -6.39658,11.20639 -9.59482,24.01156 -9.59473,38.41552 l 0,0.58594 c -9e-5,15.21026 4.40054,31.21366 13.20191,48.01025 l 0,0.60425 0.60424,0.58594 c 1.59902,3.60134 3.79629,8.00197 6.5918,13.2019 l 5.40161,9.00879 9.59473,16.79078 z"
          p-id="5494"
        />        
      </symbol>

Or, if needed to avoid breaking existing implementations, the yuan icon could remain with just the currency-format id.

sanchit3008 commented 2 months ago

The problem with the icon is that I'll need equal sized avg paths for each currency symbol we are planning to support. Rest of the points raised by you are correct and in fact I have already implemented the currency prop and will extend it to the drop-down menu.

VirtuosiMedia commented 2 months ago

The problem with the icon is that I'll need equal sized avg paths for each currency symbol we are planning to support. Rest of the points raised by you are correct and in fact I have already implemented the currency prop and will extend it to the drop-down menu.

Good point. I did find several open-sourced icon sets that might meet your criteria:

  1. Material UI Icons
  2. Font Awesome
  3. React Icons
sanchit3008 commented 2 months ago

I don't feel it's right to introduce a dependency for this use case. Ideally I'd just want the paths to provide to the svg element. Would you be willing to contribute?

VirtuosiMedia commented 2 months ago

Would you be opposed to taking just the paths from the icon sets rather than creating the dependency? Clicking on the individual icons in the links above can get either the path or the individual SVG files. Given that they are open source, with proper attribution, it should be compliant with the licenses.

As a fallback, I could create SVGs later this weekend, but I'm not sure they'll be any better than the icon sets - it's been a while since I've created icons from scratch and I'll need to find a program to create them. If you prefer that route, I'd need a list of currencies.

sanchit3008 commented 2 months ago

I'll have a look at the first option in a couple of days. I'm planning to have symbols for usd, GBP, eur, jpy, CNY and INR.

VirtuosiMedia commented 2 months ago

Sounds good, thank you for your responsiveness.

sanchit3008 commented 2 months ago

i have implemented the following changes for cny/jpy, inr, usd, eur and gbp

  1. currency prop will take a symbol (about 40 currencies supported)
  2. toolbar icon depends on the currency prop (only 5 supported, fallback is cny symbol)
  3. changed text in the dropdown

will raise a pr soon

sanchit3008 commented 2 months ago

released v0.19.14

VirtuosiMedia commented 2 months ago

Works perfectly, thank you very much!