Skip to main content

Credit card Solution

Credit Card Solution overview:​

The credit card solution contains the visualization and reports over the Credit card transaction, Customer details, Customer complaints over the credit card, card details, credit card statement report.

The following document contains five dashboards as follows:​

  1. Credit card Transactions.
  2. Customer Detail.
  3. Customer Complaints.
  4. Credit card Details.
  5. Credit card statement.

Following screens of the solutions as follows:​

  1. Credit card Transactions:

Docusaurus Slash Introduction

  1. Customer Detail:

Docusaurus Slash Introduction

  1. Customer Complaints:

Docusaurus Slash Introduction

  1. Credit card Details:

Docusaurus Slash Introduction

  1. Credit card statement:

Docusaurus Slash Introduction

Data sources and datasets:​

Here, we have used the CSV format data files to import data in OpnBI application. after adding the CSV files, we have added the respective datasets as follows:

  • User should have these files before we start making of dashboards: -
DatasourcesDatasets
Card_details.csvCreditcard_details.ds
Creditcard_complaints.csvCreditcard_complaints.ds
customer_details.csvCustomer_details.ds
User_credit_card_transactions.csvCreditcard_transactions.ds
Creditcard statement.xlsx-

List of components used in credit card Transactions​

Docusaurus Slash Introduction

Sr.no.Widget typeWidget names
1Card widgetTotal Amount of fraud transaction 2002 to 2020
2Card widgetTotal number of frauds on Credit Card from 2002 to 2020
3Custom visualization (Title)credit card transactions and frauds
4Column ChartType of transactions 2002 to 2020
5Column ChartSpending through credit card per year from 2002 to 2020
6Pie ChartCredit card fraud ratio over total customers
7Bar ChartType of issues on credit card transactions
8Table WidgetCredit spending details 2002 to 2020
9Map WidgetTransaction location of Merchant
10FilterSelect Year

Steps to create credit card transactions dashboard:​

Steps to create credit card transactions dashboard:

  1. Login to OPNBI:
  2. Login using your credentials (UserID, Password), we are login as admin here.
  3. Now to add the dashboard in OpnBi, click on hamburger icon from top-left corner and get the menu bar, then click on (+) plus icon from Dashboard as shown in figure below:
  4. Add the name of the dashboard in Name textbox, as shown in figure below:
  5. After adding the name, click on the CREATE button from the create dashboard dialog box, as shown in figure below:
  6. When the dashboard gets added in the application it shows the redirect alert message as shown in the top of the figure below:
note

The dashboard is added in the application, in the dashboard from the right-vertical menu you can add different types of widgets in the dashboard and the top-right corner provide the features like Embed dashboard, adding filter, Send mails, Dynamic messages, Mobile view/Tab screen view, Preview dashboard etc.

1. Credit card transaction title (Custom Visualization) of dashboard:​

  • Let’s add the components in the credit card transaction dashboard, follow the steps below: Docusaurus Slash Introduction

  • Steps:

  1. Select the custom visualization from the right-vertical menu bar, as shown in the figure below: Docusaurus Slash Introduction

  2. After adding the custom visualization in dashboard, go to the HTML tab from the top-menu bar from its edit properties, as shown in the figure below: Docusaurus Slash Introduction

  3. Add the widget title in Name: Credit card Transactions title:

  4. Now, add the title as required in HTML tab:

<span>Credit card Transactions</span>

Docusaurus Slash Introduction

  • click on the preview button to see the preview in widget, as shown in the figure below:
  1. Add the CSS style properties as shown in the figure below:
  • CSS style code,, you can copy the code and apply in your dashboards:
span{
font-size: 7vw;
text-shadow: 2px 2px #d3d3d3;
display: inherit;
text-align: center;
font-family: verdana;
padding: 0px;
margin: 0px;
}

Docusaurus Slash Introduction

note

After applying the CSS style, the title text gets white in color, to that title property, apply the widget style settings.

  1. Now click on Preview button to see the preview.

Docusaurus Slash Introduction

info

In this document, After the details we have provided the image to compare that with your output screen.

Widget style settings:​

  1. Click on the widget settings as shown in the figure below: Docusaurus Slash Introduction

  2. From the widget settings click on the widget box shadow properties: Docusaurus Slash Introduction

  3. Add the Widget Box Shadow Properties using the toggle button of Box Shadow, as shown in the figure below: Docusaurus Slash Introduction

  • Add below details to achieve this component:
Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#189ab4
Box Shadow Blur:2
Box Shadow Spread:1
  1. Add Widget Border and Border Radius using the Widget Border Properties,select the Border and Border Radius toggle button as shown in the figure below:

Docusaurus Slash Introduction

  • Add below details to achieve this component:
Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#189ab4
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10
  1. Remove the Title form the widget using the Title Properties, click on the title properties, as shown in the figure below:

Docusaurus Slash Introduction

  1. Click on the Show Title toggle button to uncheck the title, as shown in the figure below:

Docusaurus Slash Introduction

  1. Click on the Save and Exit button to save the component.

  2. After applying the widget properties, the widget output looks like the figure below:

Docusaurus Slash Introduction

2. Total Amount of fraud transaction 2002 to 2020:​

Docusaurus Slash Introduction

  • follow the below steps to achieve this card widget:

  1. Select the Card widget from the right-vertical menu bar, as shown in the figure below: Docusaurus Slash Introduction

  2. After adding the card widget, add the below details in Value1, as shown in figure below:

Docusaurus Slash Introduction

  • Insert following details in card widget:
Enter Name:Total Amount of fraud transaction 2002 to 2020
Select Datasets(ds):Creditcard_transactions
Add to Card General
Select Select Columnamt
Select AggregationSum
Select Filter ColumnIs Fraud?
Add Filter valueYes

Docusaurus Slash Introduction

  • Insert following details in card widget in General Tab:
StyleFormatting
Font size:26Prefix$
Padding2Suffex
Background color#ffffffDecimal Place2
Text Color#ff0000AbbreviationTurn toggle button on
AlignCenterLocaleAuto
Font weightBold
Font FamilyArial, sans-serif
  1. Add widget settings, click on the settings tab, as shown in the figure below:

Docusaurus Slash Introduction

Add Widget Box Shadow Properties as follows:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#189ab4
Box Shadow Blur:2
Box Shadow Spread:1

Add Widget Border Properties as follows:

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#189ab4
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

Add Title Properties as follows:

Title Properties
Show Title:Click on the Title checkbox to enable the properties
Title Move To:Center
Title Color:#000000
Title Font Size:12
Title Font Style:Normal
Title Font Family:-
Title Font Weight:Normal
Title Background Color:transparent
Padding:1px 1px 1px 1px
  1. Click on Save and Exit button to complete the widget.

3. Total number of frauds on Credit Card from 2002 to 2020:​

Docusaurus Slash Introduction

  1. Select the Card widget from the right-vertical menu bar, as shown in the figure below:

Docusaurus Slash Introduction

  • follow the below steps to achieve this card widget:
Enter widget name:Total number of frauds on Credit Card from 2002 to 20
Datasets(ds)Creditcard_transactions
  1. After adding the card widget, add the below details in Value1, as shown in figure below:

Docusaurus Slash Introduction

  • Insert following details in card widget:
Card General
Select ColumnsIs Fraud?
AggregationCount
Filter columnIs Fraud?
Filter ValueYes
Style
Font Size:26
Padding:2
Background Color:#ffffff
Text Color:#ff0000
Align:Center
Font Weight:Bold
Font Family:Arial,sens-serif
  1. Add widget settings, click on the settings tab, as shown in the figure below:

Add Widget Box Shadow Properties as follows:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#189ab4
Box Shadow Blur:2
Box Shadow Spread:1

Docusaurus Slash Introduction

Add Widget Border Properties as follows:

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#189ab4
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

Docusaurus Slash Introduction

Add Title Properties as follows:

Title Properties
Show Title:Click on the Title checkbox to enable the properties
Title Move To:Center
Title Color:#000000
Title Font Size:12
Title Font Style:Normal
Title Font Family:-
Title Font Weight:Normal
Title Background Color:transparent
Padding:1px 1px 1px 1px

Docusaurus Slash Introduction

4. Type of transactions 2002 to 2020​

Docusaurus Slash Introduction

  1. Select the Chart widget form the right-vertical menu bar, as shown in the figure below:
Select the chart widgetSelect the column chart and clustered column chart
Docusaurus Slash IntroductionDocusaurus Slash Introduction
  1. Add the chart dataset and setting details in Chart tab, as shown in the figure below:
Chart tab
Char tab in edit settings
Select chart: select Column chart
Select sub chart: select clustered chart
Widget Name: Type of transactions 2002 to 2020
Datasets(ds): Creditcard_transactions
Category Axis: Use Chip
Value Axis: Amount
Aggregation: Count

Docusaurus Slash Introduction

  • Add series 2 as shown in the figure below
  • Click on the Plus-icon (+) beside the Series dropdown, as shown in the figure below:

Docusaurus Slash Introduction

Add the below properties in Series 2:

Series 2
Select value column: amt
Aggregation: Sum
note

Here in the above table and the below figures, some details are not mentioned in the table due to not having any changes, and also they are default selected/added into settings. (Ex: Series and Value Axis)

  1. Add the client script in column chart to add new value column:

Docusaurus Slash Introduction

  1. click on the Client script tab from upper menu bar, as shown in the figure below:

Docusaurus Slash Introduction

Add the opnbi_code in the client script, as follows:

select *,replace(Amount,'$','') as amt from ?


Docusaurus Slash Introduction

  1. Click on Preview button and as the preview of data appear under the code, click on the Update Metadata button, and the amt column will appear in the output as shown in the figure below:

Docusaurus Slash Introduction

  1. Click on formatting tab from upper menu bar, as shown in the figure below:

Add below details in General Tab:

Docusaurus Slash Introduction

  • The colors are as follows:
#05445E,#189AB4,#75E6DA,#D4F1F4
  • Click on the Chart cursor menu and disable the Line X and Line Y

Docusaurus Slash Introduction

Add below details in Category Axis:

Click on Category Font Property and add below properties
Color: #000000
Font size: 12
Font Family: Arial
Font Weight: Normal
Opacity: keep the opacity full
Category Ticks
Disable the category ticks

Docusaurus Slash Introduction

Add below details in Value Axis:

click om the Minimum & Maximum
Minimum: o
Maximum: 1500000

Docusaurus Slash Introduction

Click on Number format
Enable the Number format toggle button
Enable the Abbreviation
Enable the Prefix from Abbreviation

Docusaurus Slash Introduction

Click on the Value Ticks
Disable the Ticks

Docusaurus Slash Introduction

Add below details in Series Tab:

Series General Properties
Series Type:Column
Series Name:Transaction Count
Column Width60
Border Width:1
Border Color:-
Opacity:keep it maximum

Docusaurus Slash Introduction

Series Value Label Position
Enable the Value LabelsTurn the toggle button on to enable the properties
Position:Outer
Text:<div>${point.y}</div>
Rotation:0
Font Color:#000000
Background Color:#ffffff
Opacity:keep the opacity as low as possible
Font Size:14
Decimal Places:0
Pedding Left:0
Pedding Right:0
Alignment:None

Docusaurus Slash Introduction

  • Select the Series-2 from dropdown, as shown in the figure below:

Docusaurus Slash Introduction

-After selecting the Series-2, Add the below details:

Series General Properties
Series Type:Column
Series Name:Amount
Column Width70
Border Width:0
Border Color:-
Opacity:keep it maximum

Docusaurus Slash Introduction

Series Value Label Position
Enable the Value LabelsTurn the toggle button on to enable the properties
Position:Outer
Text:<div>$ ${point.y}</div>
Rotation:0
Font Color:#000000
Background Color:#ffffff
Opacity:keep the opacity as low as possible
Font Size:14
Decimal Places:2
Pedding Left:0
Pedding Right:0
Alignment:None

Docusaurus Slash Introduction

  • Click on Legend tab and add below details into the Legend properties:
Go to Legends tab
Select the Legend Properties
Enable the Legendclick on the legend toggle button to add legends into the widget.

Docusaurus Slash Introduction

Legend Alignment property
Content Align:Left
Position:Top
Legend Width:50
Legend Height:50

Docusaurus Slash Introduction

Legend Font property
Font family:Arial
Font Size:12
Font Weight:Normal
Legend Color:#000000

Docusaurus Slash Introduction

Add below details into the Settings:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#75e6da
Box Shadow Blur:2
Box Shadow Spread:1

Docusaurus Slash Introduction

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#75e6da
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

Docusaurus Slash Introduction

5. Spending through credit card per year from 2002 to 2020​

Docusaurus Slash Introduction

  1. Select the Chart widget form the right-vertical menu bar, as shown in the figure below:
Select the chart widgetSelect the column chart and clustered column chart
Docusaurus Slash IntroductionDocusaurus Slash Introduction
  1. Add the chart dataset and setting details in Chart tab, as shown in the figure below:

Add Client Script for the required column:

Click on the Client script checkbox to enable the client script.

Add below OPNBI_SQL code in the Client script:

select *, replace(Amount,'$','') as amount from ?

Click on Preview button to see the output preview of the client script.

Now, as the output appears in the grid view, click on the Update Metadata. to add that column into the dataset values.

Docusaurus Slash Introduction

Add below details into the General tab:
Char tab in edit settings
Select chart:select Bar chart
Select sub chart:select clustered chart
Widget Name:Spending through credit card per year from 2002 to 2020
Datasets(ds):Creditcard_transactions
Category Axis:Year
Value Axis:amount
Aggregation:Sum

Docusaurus Slash Introduction

  1. Add below details in formatting tab:

Add below details into the General Properties:

  • Color and Theme Property:
  • Add color in the Color List, as shown in the figure below:
#05445E,#189AB4,#75E6DA,#D4F1F4

Docusaurus Slash Introduction

Add below details into the Category Axis Properties:

  • Click on Catgeory Axis tab from upper horizontal menu-bar.
  • Remove the Category Ticks by disabling the category ticks toggle button.

Docusaurus Slash Introduction

  • Add The Title at Category Axis, as shown in below figure:
Enable the category title
Text:Year
Font Family:Arial
Font Size:14
Font Weight:Normal
Color:#000000

Docusaurus Slash Introduction

Add below details in the Value Axis Properties

  • Click on Value Axis tab from upper horizontal menu-bar.
Click on value labels:Enable the value labels
Click on value ticks:Enable the value ticks
Click on the Value line:Enable the Value axis line

Docusaurus Slash Introduction

  • Add Value title from value axis, Click on value title and enable the title.
  • Add below details on the value title property:
Value AxisEnable the value axis from toggle button.
Text:Credit
Font Family:Arial
Font Size:14
Font Weight:Normal
Color:#000000

Docusaurus Slash Introduction

Add below details in the Series Axis Properties

  • Click on Series Axis tab from upper horizontal menu-bar.
Seires General Properties
Series Type:Column
Series Name:[Keep it empty]
Column width:50
Border Width:1

Docusaurus Slash Introduction

Series Value Label Position
Enable the Value LabelsTurn the toggle button on to enable the properties
Position:Outer
Text:<div>$ ${point.y}</div>
Rotation:332
Font Color:#000000
Background Color:#ffffff
Opacity:keep the opacity as low as possible
Font Size:12
Decimal Places:2
Pedding Left:0
Pedding Right:0
Alignment:None

Docusaurus Slash Introduction

Add below details in the Setting properties:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#75e6da
Box Shadow Blur:2
Box Shadow Spread:1

Docusaurus Slash Introduction

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#75e6da
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

Docusaurus Slash Introduction

Extra LabelEnable the extra label toggle button
Label Text:You can hover on chart to know the credits !
Font Size:12
Position:Right
Text Color:#000000
Title Font Weight:Normal
Padding:5px 5px

Docusaurus Slash Introduction

Click on Save and Exit button Docusaurus Slash Introduction

6. Credit card fraud ratio over total customers​

Docusaurus Slash Introduction

  1. Select the Chart widget form the right-vertical menu bar, as shown in the figure below:
Select the chart widgetSelect the column chart and clustered column chart
Docusaurus Slash IntroductionDocusaurus Slash Introduction
  1. Add the chart dataset, formatting and setting details in Chart tab, as shown in the figure below:

Add below details in the chart tab as follows:

Chart tab
Char tab in edit settings
Select chart:select Pie and Donut chart
Select sub chart:select Donut chart
Widget Name:Credit card fraud ratio over total customers
Datasets(ds):Creditcard_transactions
Category Axis:Is Fraud?
Value Axis:User
Aggregation:Count

Add below details in the general tab as follows:

Docusaurus Slash Introduction

Add below details in the General tab:

Select the color and theme property: Add below colors in the Color List:

#05445E,#189AB4,#75E6DA,#D4F1F4

Docusaurus Slash Introduction

Add below details in the Series tab:

Click on Appearance properties: Add below details as follows:

Inner radius:60
Radius:80
Start Angle:0
End Angle:360

Docusaurus Slash Introduction

  • Click on the series labels and add below details:
Enable the series label
Smart Label:Enable the smart label
Color:#000000
Text:aiv_withPercent::2
Font size:14
Font Weight:Normal

Docusaurus Slash Introduction

Add below details in the Legend tab:

Enable the Legend from the Legend Properties, as shown in the figure below:

Docusaurus Slash Introduction

Add the Legend font style, click on the Legend font and add below details:

Legend Font Properties
Font family:Arial
Font size:14
Font weight:Normal
Legend Markers Properties
Enable the Markers
Marker Height:14
Marker Width:14

Docusaurus Slash Introduction

Docusaurus Slash Introduction

Add Widget Box Shadow Properties as follows:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#189ab4
Box Shadow Blur:2
Box Shadow Spread:1

Docusaurus Slash Introduction

Add Widget Border Properties as follows:

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#189ab4
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

7. Type of issues on credit card transactions​

Docusaurus Slash Introduction

  1. Select the Chart widget form the right-vertical menu bar, as shown in the figure below:
Select the chart widgetSelect the column chart and clustered column chart
Docusaurus Slash IntroductionDocusaurus Slash Introduction

  1. Add the chart dataset, formatting and setting details in Chart tab, as shown in the figure below:

  2. Add the client script in column chart to add new value column:

Docusaurus Slash Introduction

  1. click on the Client script tab from upper menu bar.

  2. Add the opnbi_code in the client script, as follows:

select *, replace(Amount,'$','') as amt from ?

Docusaurus Slash Introduction

  1. Click on Preview button and as the preview of data appear under the code, click on the Update Metadata button, and the amt column will appear in the output as shown in the figure below:

Docusaurus Slash Introduction

  • Add below details in the chart tab as follows:
Chart tab
Char tab in edit settings
Select chart:select Bar chart
Select sub chart:select Clustered chart
Widget Name:Type of issues on credit card transactions
Datasets(ds):Creditcard_transactions
Category Axis:Errors?
Value Axis:amt
Aggregation:Count
  • Add below details in the general tab as follows:

Docusaurus Slash Introduction

  1. Go to Formatting tab to add required properties:

  • Add below details into the General Properties:

  • Color and Theme Property:

  • Add color in the Color List, as shown in the figure below:

#05445E,#189AB4,#75E6DA,#D4F1F4
  • Click on the Chart cursor menu and disable the Line X and Line Y

Docusaurus Slash Introduction

  • Add below details into the Category Axis Properties:
  • Go to Category font property and Category ticks add below properties:
Category Font Property
Color:#000000
Font Size:12
Font family:Arial
Font Weight:Normal
Opacity:Keep the opacity maximum
Category Ticks
Enable the ticksTurn the toggle button on
Width:1
Length:-300
Color:#000000
Opacity:keep the opacity half(0.5)

Docusaurus Slash Introduction

  • Go to Category Line and Category Title add below properties:
Category Line
Enable the Axis LineTurn the toggle button on
Border Width:1
Border Opacity:keep the opacity half(0.5)
Color:#05445e
Category Title:Keep the category title disable

Docusaurus Slash Introduction

  • Add below details into the Value Axis Properties:
Minimum & Maximum
Minimum:0
Maximum:1000
Value LabelDisable the value label
Value TicksDisable the value ticks
Value LineDisable the value line

Docusaurus Slash Introduction

Value Title
Enable the title
Text:Total issues
Font family:Arial
Font size:14
Font weight:Normal
Color:#000000

Docusaurus Slash Introduction

  • Add below details into the Series Properties:
Series general Properties
Series Type:Bar
Series Name:(keep this empty)
Column Name:70
Border Width:1
Border Color:-
Opacity:keep the opacity maximum

Docusaurus Slash Introduction

Series Value Labels Position
Enable the value labelsTurn the toggle button on
Position:Outer
Text:<div>${point.y}</div>
Rotation:0
Font Color:#000000
Background-Color:#ffffff
Opacity:Keep the opcity minimum
Font Size:16
Decimal Places:0
Padding Left:0.5
Padding Left:0

Docusaurus Slash Introduction

  • Add below details in the Setting properties:

  • Add widget Border shadow properties as follows:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#75e6da
Box Shadow Blur:2
Box Shadow Spread:1

Docusaurus Slash Introduction

  1. Add Widget Border and Border Radius using the Widget Border Properties,select the Border and Border Radius toggle button as shown in the figure below:
  • Add below details to achieve this component:
Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#75e6da
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10

Docusaurus Slash Introduction

Click on Save and Exit button Docusaurus Slash Introduction

8. Credit spending details 2002 to 2020​

Docusaurus Slash Introduction

  1. Select the Table widget from the right-vertical menu-bar.

  2. Select the Datasets(ds) as Creditcard_transactions.

  3. Click on the Client script checkbox beside the Datatset dropdown controls, as shown in the figure below:

Docusaurus Slash Introduction

  1. Add below code in the OPNBI_SQL client script:
select *,replace(Amount,'$','') as amount from ?

Docusaurus Slash Introduction

  1. After adding the code click on the preview button and as the output column appears in the output box below, click the Update Metadata button then the Amount column will saved in the output as shown in the figure below:

Docusaurus Slash Introduction

  1. Select the General tab and select the columns fields mentioned in below step:

Docusaurus Slash Introduction

  1. Now, select the column fields from the Dataset Columns, Select the [Year],[Is Fraud?],[amount],[Time],[Use Chip],[Merchant Name],[MCC],[Error?] as shown in figure below:

Docusaurus Slash Introduction

  1. Add Custom Column in the table, Click on the CustomColumn button from the bottom area of the General tab, as shown in the figure below:

Docusaurus Slash Introduction

  1. From the Custom Columns, click on the Condition tab from top-menu bar, as shown in the figure below:

Docusaurus Slash Introduction

  1. As you reach the Condition tab, Select the column field, where you want to add the condition:

Docusaurus Slash Introduction

  1. Select the Is Fraud? column from the list, as shown in the figure below:

Docusaurus Slash Introduction

  1. After selecting the field, the gets added in the custom column with it's controls, as shown in the figure below:

Docusaurus Slash Introduction

  1. Add the condition details as follows:
Add below details
Column Name:Is Fraud?
Condition:Equal To
Value:Yes

Docusaurus Slash Introduction

  1. Select the Code layout button to add the code, as shown in the above figure:

  2. Add below code:

{"fontWeight": "normal", "backgroundColor": "#ff0000"}

Docusaurus Slash Introduction

  1. To add the second condition, click on the Plus icon(+) beside the code layout , as shown in the figure below:

Docusaurus Slash Introduction

  1. For the second condition add below details:
Add below details
Column Name:Is Fraud?
Condition:Equal To
Value:No
  1. Add the code in the code layout:
{"fontWeight": "bold", "backgroundColor": "#00ff00"}

Docusaurus Slash Introduction

  1. After adding the code, click on the Add button, and click on save and exit button to save the component.

Docusaurus Slash Introduction

  1. Click on the Formatting tab to add formatting properties:
  • Add Below properties:
Miscellaneous Properties:
Pagination:Click on the pagination checkbox
Pagination Size:7
Text Wrap:Click on the text wrap checkbox
Theme:Content

Docusaurus Slash Introduction

  1. Click on Theme tab and add Table header and body properties as follows:
Table header propertiesTable Body Properties
Header background color:#ffffffTable body background color:#ffffff
Header Font Color:#000000Table body font size:12
Header Font Size:12Row Border Color:#ededed
Header Column Border Color:#a8a5a5Column Border Color:#b4b1b1
Odd Row Background Color:#ffffff
Odd Row Font Color:#000000
Evan Row Background Color:#ffffff
Evan Row Font Color:#000000
  1. Add widget settings, click on the settings tab, as shown in the figure below:

Docusaurus Slash Introduction

Add Widget Box Shadow Properties as follows:

Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#189ab4
Box Shadow Blur:2
Box Shadow Spread:1

Add Widget Border Properties as follows:

Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#189ab4
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10
  1. Click on save and exit button to complete the component.

9. Transaction location of Merchent:​

Docusaurus Slash Introduction

  1. Click on the map chart from the right-vertical menu bar, as shown in the figure below:

Docusaurus Slash Introduction

  1. Select the Datasets (ds): Creditcard_transactions

  2. Add Client Script to get the required column in map, Click on the Client script checkbox as shown in the figure below:

Docusaurus Slash Introduction

  1. Go to the Client Script tab and add the code as follows:
select *, replace(Amount,'$','') amt from ?
  1. After adding the code, Click on the Preview button to see the column preview:

Docusaurus Slash Introduction

  1. Now, Click on the Update metadata button to add the output column in current dataset:

Docusaurus Slash Introduction

  1. Go to the Map tab and Add the below details, as shown in the figure below:
Maps Tab
Name:Transaction location of Merchent
Select the Leaflet radio button
Datasets (ds):Creditcard_transactions
Map Type:City
Location:Merchant City
Value:amt
Aggregation:Sum

Docusaurus Slash Introduction

  1. Click on the Formatting tab and add below details:
General Map AppearanceMarker
Map Type:Cluster MapMarker:Static
BackgroundLayer:Open Street Map - StandardImage URL:default
Min Zoom:1Marker Width:25
Max Zoom:13Marker Height:41
Zoom:3

Docusaurus Slash Introduction

  1. Click on the Setting tab and add Box shadow and Border Properties as follows:
  • Add Widget Box Shadow Properties as follows:
Widget Box Shadow Properties
Box Shadow checkboxClick on the checkbox
Box Shadow Horizontal:1
Box Shadow Vertical:1
Box Shadow Color:#75e6da
Box Shadow Blur:2
Box Shadow Spread:1
  • Add Widget Border Properties as follows:
Widget Border Properties
Border checkbox:Click on border checkbox to enable the properties
Border Type:Solid
Border Width:2px 2px 2px 2px
Border Color:#75e6da
Border Radius:Click on border radius checkbox to enable the properties
Top Left Radius:10
Top Right Radius:10
Bottom Left Radius:10
Bottom Right Radius:10
  1. Click on Save and Exit button to complete this component.