safe-area-example.js

/**
* @license Apache-2.0
*
* Copyright (c) 2025 The Stdlib Authors.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

'use strict';

var basePlot = require( './../lib' );
var str;
var opt = {
	'plotAreaHeight': 12,
	'plotAreaWidth': 102,
	'axisTicsLabels': [ [1, 10], [ 1, 2 ], [ 2, 66, 666, 666 ], [ 9666, 55, 5 ] ],
	'labelFormate': [ '%s', '%s', '%s', '%s' ],
	'zAxis': false,
	'wAxis': false,
	'backgroundColor': 'Bwhite',
	'foregroundColor': 'Fblack',
	'xTicsLabelSpace': 2,
	'yTicsLabelSpace': 1,
	'zTicsLabelSpace': 3,
	'wTicsLabelSpace': 4,
	'ticsLabelsBckColor': 'Byellow',
	'autoInitialization': true,
	'xAxisPos': 40,
	'yAxisPos': 5,
	'zAxisPos': 101,
	'xTicsSpacing': 9,
	'yTicsSpacing': 9,
	'zTicsSpacing': 9,
	'wTicsSpacing': 9,
	'wAxisPos': 11
};
var instance = basePlot( opt );
instance.initialize();
str = instance.render();
console.log( str );

// Adding string

// Note : as you can see 'hel' is on one side and remaining text is on other side this is because of the label space and we are adding the string as a safe area mode
instance.setString({
	'row': 4,
	'column': 37,
	'value': 'hello Stdlib!',
	'foregroundColor': 'Fwhite',
	'backgroundColor': 'Bgray',
	'safeArea': true
});

// Note : in Safe area mode we have to provide the coordinates in range of the plotAreaHeight and plotAreaWidth.
instance.setString({
	'row': 5,
	'column': 37,
	'value': 'hello Stdlib!',
	'foregroundColor': 'Fwhite',
	'backgroundColor': 'Bgray',
	'safeArea': true
});

// Now it is going to be Visible
instance.ticsLabelsBckColor = 'Bblue';

str = instance.render();
console.log( str );

// This line require to reinitialization ( autoInitialization is on )
instance.xTicsLabelSpace = 5;
str = instance.render();
console.log( str );

// Adding bar in safe area
instance.setBar({
	'startPos': [ 0, 12 ],
	'height': 7,
	'width': 2,
	'safeArea': true,
	'overWrite': true,
	'glyph': 'block',
	'foregroundColor': 'Fred'
});

str = instance.render();
console.log( str );

// Adding bar without safe area mode
instance.setBar({
	'startPos': [ 0, 16 ],
	'height': 7,
	'width': 2,
	'overwrite': true,
	'safeArea': false,
	'glyph': 'block',
	'foregroundColor': 'Fred'
});
str = instance.render();
console.log( str );